Passo 32

Instruções

Agora, crie uma função updateResult. Dentro dela, crie uma variável shape definida como shapeTypeSelect.value, depois use let para criar uma variável result do tipo string definida como uma string vazia. Abaixo disso, use a propriedade textContent para definir o conteúdo de resultText como result.

O que fazer:

Testes:

Você deve criar uma função `updateResult`.
Você deve criar uma variável `shape` definida como `shapeTypeSelect.value` dentro da sua função `updateResult`.
Você deve usar `let` para criar uma variável `result` definida como uma string vazia dentro da sua função `updateResult`.
Sua variável `result` deve ter `string` como tipo.
Você deve definir a `textContent` de `resultText` como `result`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Shape Manager</title>
  </head>
  <body>
    <div class="container">
      <div class="text-center mb-8">
        <h1>Shape Manager</h1>
        <p class="subtitle">Calculate areas of geometric shapes</p>
      </div>

      <div class="card">
        <div class="card-header">
          <h2 class="card-title">Shape Calculator</h2>
        </div>
        <div class="card-content">
          <div class="form-group">
            <label for="shape-type" class="label">Shape Type</label>
            <select id="shape-type" class="select">
              <option value="">Select shape type</option>
              <option value="circle">Circle</option>
              <option value="rectangle">Rectangle</option>
              <option value="triangle">Triangle</option>
            </select>
          </div>

          <div id="property-inputs">
          
            <div id="circle-props" class="form-group hidden">
              <label for="radius" class="label">Radius</label>
              <input
                type="number"
                min="0"
                id="radius"
                placeholder="Enter radius"
                class="input"
              />
            </div>
          
            <div id="rectangle-props" class="form-grid hidden">
              <div class="form-group">
                <label for="width" class="label">Width</label>
                <input
                  type="number"
                  min="0"
                  id="width"
                  placeholder="Width"
                  class="input"
                />
              </div>
              <div class="form-group">
                <label for="height" class="label">Height</label>
                <input
                  type="number"
                  min="0"
                  id="height"
                  placeholder="Height"
                  class="input"
                />
              </div>
            </div>
         
            <div id="triangle-props" class="form-grid hidden">
              <div class="form-group">
                <label for="base" class="label">Base</label>
                <input
                  type="number"
                  min="0"
                  id="base"
                  placeholder="Base"
                  class="input"
                />
              </div>
              <div class="form-group">
                <label for="triangle-height" class="label">Height</label>
                <input
                  type="number"
                  min="0"
                  id="triangle-height"
                  placeholder="Height"
                  class="input triangle-height"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="result-card" class="card">
        <div class="card-content result-card-content">
          <div id="result-text"></div>
          <div class="result-area"></div>
        </div>
      </div>
    </div>
    <script src="index.ts"></script>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
  color: #334155;
  min-height: 100vh;
  padding: 1rem;
}

.container {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.text-center {
  text-align: center;
}

.mb-8 {
  margin-bottom: 2rem;
}

h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.subtitle {
  color: #475569;
}

.card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.card-title {
  font-size: 1.25rem; 
  font-weight: 600;
}

.card-content {
  padding: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  margin-bottom: 1.5rem;
}

.label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.input,
.select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  font-size: 1rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

.result-card-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.result-icon-container {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

#result-text {
  flex-grow: 1;
}
#result-text h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
#result-text p {
  color: #475569;
  text-transform: capitalize;
}

.hidden {
  display: none;
}

/* Hide the result card until a shape is selected */
#result-card {
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

/* Add this class to show the result card */
#result-card.visible {
  display: block;
  opacity: 1;
}

interface Shape {
  type: string;
}

interface Circle extends Shape {
  type: "circle";
  radius: number;
}

interface Rectangle extends Shape {
  type: "rectangle";
  width: number;
  height: number;
}

interface Triangle extends Shape {
  type: "triangle";
  base: number;
  height: number;
}

type Shapes = Circle | Triangle | Rectangle;

const getElement = (id: string): HTMLElement => {
  const el = document.getElementById(id);
  if (!el) throw new Error(`Element not found: ${id}`);
  return el;
};

let shapeTypeSelect: HTMLSelectElement;

let propertyGroups: {
  circle: HTMLElement;
  rectangle: HTMLElement;
  triangle: HTMLElement;
};

let propertyInputs: {
  radius: HTMLInputElement;
  width: HTMLInputElement;
  height: HTMLInputElement;
  base: HTMLInputElement;
  triangleHeight: HTMLInputElement;
};

let resultText: HTMLElement;
let resultCard: HTMLElement;

const chooseShape = (shapeType: string) => {
  Object.entries(propertyGroups).forEach(([name, group]) => {
    if (name === shapeType) {
      group.classList.remove("hidden");
    } else {
      group.classList.add("hidden");
    }
  });
};

const toggleResultCard = (show: boolean) => {
  if (show) {
    resultCard.classList.add("visible");
  } else {
    resultCard.classList.remove("visible");
  }
};

const calculateArea = (shape: Shapes): string => {
  switch (shape.type) {
    case "circle":
      return `Area of Circle: ${(Math.PI * shape.radius ** 2).toFixed(2)}`;
    case "rectangle":
      return `Area of Rectangle: ${shape.width * shape.height}`;
    case "triangle":
      return `Area of Triangle: ${0.5 * shape.base * shape.height}`;
    default:
      const _nonExistent: never = shape;
      return _nonExistent;
  }
};

Preview