Невозможно исправить ошибку «Ошибка 1 - тег таблицы должен иметь 3 строки и проверить с требованиями для CSS для таблицы и tr» - PullRequest
Новая
       1

Невозможно исправить ошибку «Ошибка 1 - тег таблицы должен иметь 3 строки и проверить с требованиями для CSS для таблицы и tr»

1 голос
/ 25 февраля 2020

Я работаю над своим заданием на программирование, которое описывается следующим образом!

Создайте веб-страницу, которая рассчитывает скидку на продукт для указанного c сезона. Сезоны с их скидками - лето (10%), новый год (5%) и распродажа (15%). Скидка рассчитывается по цене продукта.

Ожидаемые I / P, O / P разделены по ссылкам ниже:
Экран ввода https://i.stack.imgur.com/Tnqgq.jpg
Вывод Экран https://i.stack.imgur.com/8dau2.png

Требования к веб-странице:

Требования к веб-странице

Цвет фона веб-страницы должен быть # 99FFFF. Надпись «Цена со скидкой» должна быть тегом заголовка (h1) и должна быть помечена c полужирным шрифтом, по центру и в цветном коде # b03060.

Название продукта - текстовое поле с именем «имя» , не должно быть пустым, содержать только алфавиты и пробел и обязательное поле.

Цена - числовое поле с именем цена, обязательное поле и минимальное значение должно быть больше 15000.

Сезон это выпадающий список с именем тега «сезон». Раскрывающееся окно будет иметь следующее значение и отображаемое значение

· лето - летняя распродажа

· новый год - новогодняя распродажа

· оформление - распродажа

Таблица должна быть выровнена по левому краю с 35% и стилем внешней границы solid 5px и шириной 30% границы. Расстояние между элементом и границей должно составлять 10 пикселей.

Должна присутствовать кнопка отправки с выравниванием по левому краю на 45% и значением «ПОЛУЧИТЬ ЦЕНУ НА СКИДКУ». После отправки веб-страница рассчитывает цену со скидкой для продукта.

Результат должен отображаться в 2 тегах div, где первый будет иметь идентификатор с именем «discount» и отображать% скидки от product и second будут иметь идентификатор с именем «result» и должны отображать сниженную цену продукта. Оба тега div должны быть выровнены по центру жирным шрифтом. Шрифт цены со скидкой должен быть itali c, # FF0000 и размером 40px, а для% скидки это 25px. Есть отдельные стили для div, скидки и результата.

Я получаю сообщение об ошибке:
Fail 1 - Table tag should have 3 rows and check with the requirements for CSS for table and tr

Мой фрагмент кода выглядит следующим образом, кто-нибудь может мне помочь с ошибкой? 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body 
            {
                background-color: #99FFFF;
            }
            h1{
                font-style:italic;
                font-weight:bold;
                text-align:center;
                color: Maroon;
            }
            table{
                border-collapse: collapse;
                text-align: center;
                border : 5px solid black;
                width: 30%;
                margin-left: 35%;
            }
            tr,td
            {
                text-align: left;
                padding: 10px;
                border: solid 2px black;
            }
            #submitbutton
            {
              margin-left: 45%;   
            }
            div{
                text-align:center;
                font-weight:bold;
            }
            #result{
                font-style:italic;
                color:#FF0000;
                font-size:40px;
            }
            #discount{
                font-size:25px;
            }
        </style>
        <script type="text/javascript">
            function discount()
            {
                    var x = document.myForm.season.value;
                    var disc;
                    if(x.match("summer"))
                    {
                        disc = 10;
                    }
                    else if(x.match("newyear"))
                    {
                        disc = 5;
                    }
                    else if(x.match("clearance"))
                    {
                        disc = 15;
                    }
                    document.getElementById("discount").innerHTML = "The discount is "+disc+"%";
                    var p = document.myForm.price.value;
                    p = p - (p*disc)/100;
                    document.getElementById("result").innerHTML = "The discounted price : Rs "+p;
                    return false;

            }
        </script>
    </head>
    <body>
        <h1>DISCOUNT PRICE</h1>
        <form method="get" name="myForm" onsubmit="return discount()">
            <table>
                <tr>
                    <td>Product Name</td>
                    <td><input type="text" name="name" required pattern="[\sa-zA-Z]+"></td>
                </tr>
                <tr>
                    <td>Product Price</td>
                    <td><input type="number" name="price" required pattern="[\d]+" min="15001"></td>
                </tr>
                <tr>
                    <td>Season</td>
                    <td><select name="season" id="season">
                        <option value="summer">SUMMER SALE</option>
                        <option value="newyear">NEW YEAR SALE</option>
                        <option value="clearance">CLEARANCE SALE</option>
                    </select></td>
                </tr>
            </table><br/>
            <input type="submit" name="submit" id = "submitbutton" value="GET DISCOUNT PRICE">
        </form>
        <br/>
        <div id="discount"></div>
        <br/>
        <div id="result"></div>

    </body>
</html>

1 Ответ

0 голосов
/ 25 февраля 2020

Предполагая, что отправленный вами текст точно соответствует тексту назначения

Я проанализировал ваше назначение и ваш код и обнаружил лишь несколько расхождений. На самом деле, спецификации заданий там, где они не завершены, оставляя место для личной интерпретации.

Прежде всего

  • у вас есть 3 строки таблицы, поэтому я не понимаю ошибки в этом.

Во-вторых

  • h1 {...color: #b03060...} согласно спецификации c, а не Maroon
  • table {...text-align: center...} не спецификации c
  • table {...border-collapse: collapse...} не спец c, но подразумевается изображениями.
  • tr,td {...text-align: left...} не спец c. Кроме того, text-align является left по умолчанию, поэтому избыточно.

Пропуски спецификации:

  • использование <form> (spe c говорит "webpage" не 'форма', большая разница! Используемые <h1> и <div> являются <form> зависимыми, а не веб-страницами).
  • следовательно форма name опущена
  • позиция <h1> внутри <form> (часть формы, а не веб-страница, предполагается модальное использование)
  • позиция <div> внутри <from> (то же самое)
  • количество используемых строк таблицы
  • Использование javascript (подразумевается, но не спец. c)
  • Имя JS function

Ниже мой фрагмент кода полностью прокомментирован с моими выводами (скопировал ваше javascript как есть, не анализируется) ... 

            function discount()
            {
                    var x = document.myForm.season.value;
                    var disc;
                    if(x.match("summer"))
                    {
                        disc = 10;
                    }
                    else if(x.match("newyear"))
                    {
                        disc = 5;
                    }
                    else if(x.match("clearance"))
                    {
                        disc = 15;
                    }
                    document.getElementById("discount").innerHTML = "The discount is "+disc+"%";
                    var p = document.myForm.price.value;
                    p = p - (p*disc)/100;
                    document.getElementById("result").innerHTML = "The discounted price : Rs "+p;
                    return false;

            }
            /* The web page background color should be #99FFFF */
            body {
                background-color: #99FFFF; /* spec */
            }
            /* The label “Discount Price” should be a 
                  - heading tag(h1) and should be 
                  - italic
                  - bolded,
                  - centered, and in 
                  - color code #b03060. */
            h1 {
                font-style : italic;  /* spec */
                font-weight: bold;    /* spec */
                text-align : center;  /* spec */
                color      : #b03060; /* mod, was 'Maroon' not spec */
            }
            /* Use of <form> not specified, implied */

            /*
                The table should be 
                   - left aligned with 35% and an 
                   - outer border style of solid 5px
                   - and 30% border width. (?????)
            */
            /* Ambiguous spec: outer border style of solid 5px and 30% border width */
            table {
                border-collapse: collapse;  /* not spec, implied from img */
            /*    text-align     : center;    /* !!!!!!!not spec */
                border         : 5px solid; /* spec */
                margin-left    : 35%;       /* spec */
            }
            /* 
                The space between element and the border must be 10px
                (!!!!!!!maximum row count not in spec!!!!!!!) */
            tr,td {
            /*    text-align: left; /* !!!!!!!not spec, but left alignment is default html */
                padding   : 10px; /* spec */
                border    : solid 2px black; /* not spec, implied from img */
            }
            /*
                Use of <br> between table, button and div is implied from img,
                no type of spacing between these elements is specified.
            */

            /*
                A submit button with 
                   - left aligned with 45% and
                   - with a value “GET DISCOUNT PRICE” should be present.
            */
            #submitbutton {
              margin-left: 45%; /* spec */
            }
            /*
            The outcome must be displayed in 2 div tags,

            where the first will have the
               - id named “discount” and is to 
               - display the discount % of the product
            
            and the second will have the 
               - id named “result” and is to
               - display the discounted price of the product.
            
            Both the div tags should be 
               center aligned with bold text.
               
            The font of the discounted price must be
               - italic,
               - #FF0000 and 
               - 40px size
            
             and for discount % it is
               - 25px.
            
            Have separate styles for div, discount and result.

            (Below CSS up to spec)
            */

            /* Separate styles as per spec */
            div {
                text-align : center; /* spec */
                font-weight: bold;   /* spec */
            }
            #discount {
                font-size: 25px; /* spec */
            }
            #result {
                font-style: italic;  /* spec */
                color     : #FF0000; /* spec */
                font-size : 40px;    /* spec */
            }
        <!-- should probably be part of <form>, but not in spec as such -->
        <h1>DISCOUNT PRICE</h1>

        <!-- Use of form implied, not in spec, name not in spec -->
        <form method="get" name="myForm" onsubmit="return discount()">
            <table>
                <tr>
                    <!-- ROW 1 (up to spec)
                     Product name - a text box with the name "name",
                        - should not be empty,
                        - contain only alphabets and
                        - space and mandatory field.
    
                    -->
                    <td>Product Name</td>
                    <td><input type="text" name="name" required pattern="[\sa-zA-Z]+"></td>
                </tr>

                <tr>
                    <!-- ROW 2 (up to spec)
                    Price 
                       - a number box 
                       - with the name price,
                       - mandatory field and 
                       - the minimum value should be greater than 15000.
                     -->
                    <td>Product Price</td>
                    <td><input type="number" name="price" required pattern="[\d]+" min="15001"></td>
                </tr>

                <tr>
                    <!-- ROW 3 (up to spec)
                    Season 
                       - is a drop down box 
                       - with tag name “season”.
                    
                       - The drop down box will have the following value and display value
                         · summer - SUMMER SALE
                         · newyear - NEW YEAR SALE
                        · clearance - CLEARANCE SALE
                     -->
                    <td>Season</td>
                    <td><select name="season" id="season">
                        <option value="summer">SUMMER SALE</option>
                        <option value="newyear">NEW YEAR SALE</option>
                        <option value="clearance">CLEARANCE SALE</option>
                    </select></td>
                </tr>
            </table>
            <br/>
            <!-- spec -->
            <input type="submit" name="submit" id = "submitbutton" value="GET DISCOUNT PRICE">
        </form>

        <!-- should probably be part of <form>, but not in spec as such -->
        <br/>
        <div id="discount"></div>
        <br/>
        <div id="result"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...