Button for browsing weekly recipes in HTML table format

Seeking assistance in creating a dynamic weekly recipe webpage using HTML and CSS. The goal is to have a form where users can submit a recipe, which will then be added to a specific day of the week in a table displaying all recipes for that day. Can someone guide me on how to achieve this? Thank you. Below is the code I have so far:

<!DOCTYPE html>
<html>
<head>
    <title> Weekly Recipes </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="heading">
        <h2>Weekly Recipes</h2>
    <div>

    <form method="POST" action="index.html">
        <input type="text" name="task" class="task_input">
        <button type="submit" class="task_btn" name="submit">Add Recipe</button>

    </form>

    <div>
        <table id="t01">
          <tr>
            <th>Sunday</th>
            <th>Monday</th> 
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
          </tr>
        </table>
    </div>

</body>
</html>

CSS Code:

    .heading{
    width: 400px;
    height:150px;
    margin: 30px auto;
    text-align: center;
    color: #6B8E23;
    background: #FFF8DC;
    border: 2px solid #6B8E23;
    border-radius: 20px

}

form{
    width:250px;
    margin: 30px auto;
    border-radius :5px;
    padding: 10px;
    background: #FFF8DC;
    border: 1px solid #6B8E23;
}

table {
  width:100%;

}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: #6B8E23;
  color: white;


}

Answer №1

To enable real-time updates on the website, JavaScript is essential. For a comprehensive JavaScript tutorial, consider looking up w3schools on Google.

If you need to submit a form to a server to store a recipe and display it upon reloading the page, you can utilize PHP or another server-side programming language.

Answer №2

Here's a simple demonstration showcasing a basic JavaScript implementation to dynamically update the Document Object Model (DOM) based on a few specified criteria.

document.getElementById("recipe-form").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent the form submission to the server.

  const recipe = document.getElementById("task").value;
  const day = document.getElementById("day").value;
  const cell = document.querySelectorAll("#t01 td")[day];

  cell.innerHTML += "<p>" + recipe + "</p>"; // Update the selected day's cell.
  document.getElementById("task").value = null; // Clear the input field.
});
.heading {
  width: 400px;
  height: 150px;
  margin: 30px auto;
  text-align: center;
  color: #6B8E23;
  background: #FFF8DC;
  border: 2px solid #6B8E23;
  border-radius: 20px
}

form {
  width: 320px;
  margin: 30px auto;
  border-radius: 5px;
  padding: 10px;
  background: #FFF8DC;
  border: 1px solid #6B8E23;
}

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
}

table#t01 tr:nth-child(even) {
  background-color: #eee;
}

table#t01 tr:nth-child(odd) {
  background-color: #fff;
}

table#t01 th {
  background-color: #6B8E23;
  color: white;
}
<div class="heading">
  <h2>Weekly Recipes</h2>
</div>

<form id="recipe-form">
  <input type="text" name="task" id="task" class="task_input">
  <select id="day">
    <option value="0">Sunday</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
  </select>
  <button type="submit" class="task_btn" name="submit">Add Recipe</button>

</form>

<div>
  <table id="t01">
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

Is there a method to achieve a similar effect as col-md and col-sm but for adjusting height instead?

I'm looking for a way to adjust the height based on the device size like how sm, md, and lg classes work. I'm designing a login form that looks great on cell phones, but appears too tall with excessive spacing when viewed on an iPad. There are la ...

An issue occurred while attempting to hover over the text in the SVG map

I have a United States map. This code contains CSS for styling the map with different colors for each state. It also includes an SVG image of the map and text labels for each state name. However, there is an issue with the hover effect on the state name ...

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

SASS: Issues with the @media query functionality

My SASS file is giving me trouble with the media query. The background color changes properly, but the text remains unaffected. I would greatly appreciate your assistance with this issue. Below is the HTML and SASS code snippets in question: <!-- HTM ...

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

Notification feature experiencing technical difficulties

I have encountered an issue with a simple message form that I created. While the message is sent successfully and a thank you page is displayed, there are two errors that occur. The first error is: Notice: Undefined index: name in public_www/n..../contact- ...

Is the IE7 Modal Dialog Misaligned?

Update After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to refe ...

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

Effortless 'rotational' script

I am currently developing a HTML5 Canvas game with the help of JavaScript. My aim is to create an object that smoothly transitions to a specific direction. The direction is being stored as a variable and calculated in radians. Here's how the code op ...

Utilizing CSS naming conventions to bring order to class inheritance

I'm a bit unclear about the rationale behind using this specific CSS structure: h2.class-name It seems like you could simply use .class-name and apply that class to the h2 element: <h2 class="class-name">Title thing</h2> Unless it&apos ...

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

Database query is failing to return any results

Currently, I am developing a URL shortener system which involves storing data in my database such as an id, url, code, and created. However, I encountered an issue where the code does not return the required code despite checking if the entered url exists. ...