HTML Page for Intersecting lines with 4 textboxes for MAUI Blazor App

Question

HTML Page for Intersecting lines with 4 textboxes for MAUI Blazor App

Kalyan A 440

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Angles with Textboxes</title>
<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
  }
  .line1, .line2 {
    position: absolute;
    width: 2px;
    height: 200px;
    background-color: black;
    top: 0;
    left: 50%;
    transform-origin: top;
  }
  .line1 {
    transform: rotate(45deg); /* First line at 45 degrees */
  }
  .line2 {
    transform: rotate(-45deg); /* Second line at -45 degrees */
  }
  .angle-box {
    position: absolute;
    width: 40px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #000;
    background-color: #f9f9f9;
  }
  /* Positioning each angle box */
  .angle1 { top: 10%; left: 10%; }
  .angle2 { top: 10%; right: 10%; }
  .angle3 { bottom: 10%; left: 10%; }
  .angle4 { bottom: 10%; right: 10%; }
  /* Additional styling to show vertical angle relationships */
  .angle-box {
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div class="container">
  <div class="line1"></div>
  <div class="line2"></div>
  <!-- Angle Textboxes -->
  <div class="angle-box angle1">∠1</div> <!-- Angle 1 at top left -->
  <div class="angle-box angle2">∠2</div> <!-- Angle 2 at top right -->
  <div class="angle-box angle3">∠3</div> <!-- Angle 3 at bottom left -->
  <div class="angle-box angle4">∠4</div> <!-- Angle 4 at bottom right -->
</div>
</body>
</html>

The above is AI generated html to represent intersecting lines , but I want the angles like the below image.

The lines should form X shape and 4 text boxes can be placed in the V shapes.

vertical

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Bruce (SqlWork.com) 81,711 Volunteer Moderator

you create two vertical line, positioned at the top and middle of div. you specified rotate origin at the top rather than the middle.

the angle box are absolute, so you are placing all based the top left corner of the container. basically the 4 quadrants 1 & 2 are 10% from top and 10% from right and left respective. you probably want to transfer to middle, then offset:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Angles with Textboxes</title>
<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
  }
  .line1, .line2 {
    position: absolute;
    width: 2px;
    height: 200px;
    background-color: black;
    top: 0;
    left: 50%;
    transform-origin: center;
  }
  .line1 {
    transform: rotate(45deg); /* First line at 45 degrees */
  }
  .line2 {
    transform: rotate(-45deg); /* Second line at -45 degrees */
  }
  .angle-box {
    position: absolute;
    width: 40px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #000;
    background-color: #f9f9f9;
  }
  /* Positioning each angle box (which are twice as wide as high) */
  .angle1 { transform: translate(-50%, -150%) translate(100px, 100px); }
  .angle2 { transform: translate(25%, -50%) translate(100px, 100px); }
  .angle3 { transform: translate(-50%, 50%) translate(100px, 100px);}
  .angle4 { transform: translate(-125%, -50%) translate(100px, 100px);}
  /* Additional styling to show vertical angle relationships */
  .angle-box {
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div class="container">
  
    <div class="line2"></div>
    <div class="line1"></div>
    <!-- Angle Textboxes -->
    <div class="angle-box angle1">∠1</div> <!-- Angle 1 at top left -->
    <div class="angle-box angle2">∠2</div> <!-- Angle 2 at top right -->
    <div class="angle-box angle3">∠3</div> <!-- Angle 3 at bottom left -->
    <div class="angle-box angle4">∠4</div> <!-- Angle 4 at bottom right -->
  </div>
</body>
</html>

Kalyan A 440 Reputation points

2024-11-15T10:03:58.4566667+00:00

Thanks for the explanation that helps.

Kalyan A 440

Here is my maui app

@inject NavigationManager Navigation
@page "/Trav"
<h3>Trav</h3>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What are Linear pair of angles?</title>
    <p>When two lines intersect each other at a single point, linear pairs of angles are formed. If the angles so formed are adjacent to each other after the intersection of the two lines, the angles are said to be linear. 
        If two angles form a linear pair, the angles are supplementary, whose measures add up to 180°. Hence, a linear pair of angles always add up to 180°. ∠1 + ∠4=180° ∠2 + ∠4=180° ∠2 + ∠3=180° ∠1 + ∠3=180°</p>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        .line1, .line2 {
            position: absolute;
            width: 2px;
            height: 200px;
            background-color: black;
            top: 0;
            left: 50%;
            transform-origin: center;
        }
        .line1 {
            transform: rotate(45deg); /* First line at 45 degrees */
        }
        .line2 {
            transform: rotate(-45deg); /* Second line at -45 degrees */
        }
        .angle-box {
            position: absolute;
            width: 40px;
            height: 20px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #000;
            background-color: #f9f9f9;
        }
        /* Positioning each angle box (which are twice as wide as high) */
        .angle1 {
            transform: translate(-50%, -150%) translate(100px, 100px);
        }
        .angle2 {
            transform: translate(25%, -50%) translate(100px, 100px);
        }
        .angle3 {
            transform: translate(-50%, 50%) translate(100px, 100px);
        }
        .angle4 {
            transform: translate(-125%, -50%) translate(100px, 100px);
        }
        /* Additional styling to show vertical angle relationships */
        .angle-box {
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="line2"></div>
        <div class="line1"></div>
        <!-- Angle Textboxes -->
        <div class="angle-box angle1"> <input type="text" class="textbox textbox1" disabled=@isdisabled placeholder ="Angle 1" @bind="@num1"></div> <!-- Angle 1 at top left -->
        <div class="angle-box angle2">@num2</div> <!-- Angle 2 at top right -->
        <div class="angle-box angle3">@num3</div> <!-- Angle 3 at bottom left -->
        <div class="angle-box angle4">@num4</div> <!-- Angle 4 at bottom right -->
    </div>
    <br />
    <p style="color: red;">
        @errmsg
    </p>
    <br />
    <div>
        <button @onclick="Submit">Submit</button>
    </div>
    <br />
    <div>
        <button @onclick="Clear">Clear</button>
    </div>
    <br>
</body>
@code {
    private int num1; private int num2; private int num3; private int num4; private bool isdisabled = false; private int errcount = 0; private string errmsg;
    private void Submit()
    {
        if ((num1 > 0)  )
        { isdisabled = true; }
        if ((num1 <= 0)  )
        { errmsg = "Enter positive numbers "; errcount++; }
        if ((num1 > 179) )
        { errmsg = "Angle cannot be greater than 179 "; errcount++; }
        if (errcount == 0)
        {
            num2 = 180-num1;
            num3 = num1;
            num4 = num2;
        }
        else
        { isdisabled = false; }
    }
    void Clear()
    { num1 = 0; num2 = 0; isdisabled = false; num3 = 0; num4 = 0; errcount = 0; errmsg = ""; }
}

Share via

HTML Page for Intersecting lines with 4 textboxes for MAUI Blazor App

0 additional answers

Your answer