The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with:

  • Despite trying various methods, I couldn't add padding above my "h1" title successfully. Any suggestions on how to achieve this?

  • I want the weather photos and information to be centered in the box (similar to day0) but I haven't been able to accomplish it yet. Any tips on how to achieve this desired layout?

  • Should I split my .js file into separate files for each function or is it acceptable to keep everything in one file? I want to ensure clarity and avoid confusion.

HTML: 

<!doctype html>

<html lang="en">

<head> 
 <meta charset="utf-8> 
 <title>AccuMeteo</title>
 <meta name="description" content="AccuMeteo Weather Forecast">
 <meta name="keywords" content="Daily and Weekly Weather forecast">
 <link href="css/accumeteo.css" rel="stylesheet">
   <script type="text/javascript" src="js/accumeteo.js"></script>   
</head>

<body>
   <!-- wrapper  section starts -->
    <div id="wrapper">


        <!-- header  section starts -->
    <div id="header">

    <img src="images/header.jpg" width="975" height="220" alt="Blue Sky Header" class="floatleft">

    </div>

        <!-- header  section ends -->

  <!-- menu  section starts -->     
    <div id="menu">
        <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="vancouver.html" id="current" class="first">Vancouver</a></li>
                <li><a href="dallas.html">Dallas</a></li>
                <li><a href="ny.html">New York</a></li>
                    <li><a href="placeholder.html">Contact Us</a></li>
            </ul>
    </div>

        <!-- menu  section ends -->

<div id="content">

<div id="city">
    <h1>Vancouver, BC</h1>
</div>    

<div id="date">
    <noscript> <div>! JavaScript is not enabled.</div> </noscript>

    <div id="PST"></div>
    <div id="year"></div>
    <div id="ordinal"></div>
    <div id="day"></div>
</div>

<div id="panel">


    <div id="day0">
    </div>

    <div id="day1">
    </div>

    <div id="day2">
    </div>

    <div id="day3">
    </div>

    <div id="day4">
    </div>

    <div id="day5">
    </div>

    <div id="day6">
    </div>
</div>

</div>





        <!-- footer section starts -->
    <div id="footer">
        <p class="bottom">Copyright &copy; 2012 JC Design  |  All Rights Reserved  |  <a href="#">Terms and Conditions</a></p>
    </div>
    <!-- foot section ends -->      


    <!-- wrapper section starts -->
  <script>
    displayTime("PST");
</script>
   </div>

</body>
</html>

.css

/*Homepage* /

/*Body*/
html {background-color: #e2e2e2}

body {
   color: #000; background: #fff;
   font-family: Verdana,helvetica,arial, sans-serif; 
   font-size: 90%;
   text-align: left;
   width: 975px;
   margin-left: auto;
   margin-right: auto;
}

p {
   margin-left: 35px;
   margin-right: 25px;
   text-align: left;
}

/*---------------Navigation styles-------------------*/

#menu {
  float: left; 
  margin:0;
  padding-top: 0px;
  width: 100%;
  background: #4186d3; color: #04356c;
}  


#menu ul {
  margin: 0px;
  position: relative 
}


#menu ul li {
  display: inline; 
}


#menu ul li a {
  float: left;
  padding: 5px 16px;
  margin-right: 0px;
  background: #4186d3; color: #04356c;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}


#menu ul li a:hover {
  color: #04356c; background: #fff;
  text-decoration: underline;
}

#menu li a#current {
  background: #0d56a6; color: #fff;
}

/*Bottom link formatting*/

p.bottom a:link { 
   background: #04356c; color: #fff;
}


p.bottom a:visited { 
   color: #ba1212;
}

p.bottom a:hover {
   color: #f9b41f;  
   text-decoration: none; 
}

p.bottom a:active{
    background: #3ca0d0; color: #000;
}


/*Page wrapper*/
#wrapper {
   margin: 0 auto; 
   width: 975px; 
   text-align: left;
}

/*Banner styles*/

#header {
   background-color: #2d1d06; color: #7d890d;
   font-family: verdana, helvetica, arial, sans-serif;
   font-size: 150%;
   width: 925px;
   padding: 0px;
}


#footer {
   clear: both;
  background: #04356c; color: #fff;
   font-family: Verdana,helvetica, arial, sans-serif;
   font-size: 90%;
   font-weight: normal;
   width: 975px;
   padding-bottom: 3px;
   padding-top: 3px;
}

#footer p {
   text-align: center;
}


.content {
  padding: 0px 0px 0px 160px;
  position: relative;
}


/* Images*/
img { 
   border: 0px; 
   padding: 0px;
}

.floatleft { 
   float: left;
   margin: 0px;
   padding: 0px; 
   border: none;  
}



/*Headings*/
hr{
  position: absolute;
   width: 45%;
   margin-left: 35px;
   margin-right: 45px;
   border: 1px dotted #000; 
}
h1{
   color: #7d890d;
   font-size: 140%;
   font-weight: normal;
   margin-left: 35px;
}

h2{
   color: #052a6e;
   font-weight: normal;
   font-size: 125%;
   margin-left: 35px;
}


/*********************/
/*  Date Properties  */
/*********************/

#date {
   float: right;
   margin: 10px;
}

#day, #ordinal, #year {
   float: right;
}

#ordinal {
   vertical-align: baseline;
   font-size: 0.8em;
   position: relative;
   top: -0.2em;
}


/*  JavaScript Panel Properties  */


#panel {
   font-size: 0.8em;
   width: 100%;
   float: left;
   margin: 5px;
}


#day0, #day1, #day2, #day3, #day4 {
   float: left;
   width: 181px;
   height: 355px;
   border: 1px solid black;
   margin: 4px;
   text-align: center;
}


td,th {
   width: 175px;
   height: 35px;
   font-size: 1.3em;
}

th {
   font-size: 1.5em;
}

#spacerCell {
   height: 70px;
}

.tempLow, .tempHigh {
   font-size: 2em;
   color: blue;
}

.tempHigh {
   color: red;
}

.js

var thisDate = new Date();
var day = thisDate.getDate();
var dayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

var sun = new Forecast( "sunny.png", "Sunny", 17, 31 );
var clouds = new Forecast( "cloudy.png", "Cloudy", 10, 23 );
var showers = new Forecast( "mix.png", "Mix of Sun and Cloud", 12, 20 );    
var rain = new Forecast( "rain.png", "Rain", 6, 14 );  

var fList = [ sun, clouds, showers, rain ];    
var pList = [ "day0", "day1", "day2", "day3", "day4" ];    

var low, high;


// Functions

function init()
{
    displayDate();
    displayForecast();
}
window.onload=init;


function Forecast( image, title, minTemp, maxTemp )
{
    this.image=image;
    this.title=title;
    this.minTemp=minTemp;
    this.maxTemp=maxTemp;
}


function randomNumber( min, max )
{
    var rand = Math.random() * (max - min + 1) + min;
    rand = Math.floor(rand)
    return rand;
}


function displayTime( timeZone )
{
    var timeE = document.getElementById( timeZone );
    var offset, hh, mm, AMorPM;

    switch ( timeZone )
    {
        case "PST":
            offset = -7;
            break;
        case "EST":
            offset = -4;
            break;
        case "CDT":
            offset = -5;
            break;
        default:
            timeE.innerHTML += "Error!";
    }

    thisDate = calcTime( offset );
    hh = thisDate.getHours();
    mm = thisDate.getMinutes();

    if( mm < 10 ){ mm = "0" + mm; }

    if( hh > 12 )
    {
        hh -= 12;
        AMorPM = " PM";
    }
    else
    {
        AMorPM = " AM";
    }

    timeE.innerHTML += hh + ":" + mm + " " + AMorPM + " (" + timeZone + ")";
}

// This will return a Date object with the city's current time based on that city's "offset" from the GMT.
function calcTime( offset )
{
    var date = new Date();
    date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000 + offset*60*60*1000);
    return date;
}


//This will return a new Date object for a single forecast
function addDays(myDate,days)
{
    return new Date(myDate.getTime() + days*24*60*60*1000);
}


function displayDate()
{
    var dayE = document.getElementById("day");
    var ordinalE = document.getElementById("ordinal");
    var yearE = document.getElementById("year");

    // Display the day of the week and the date (month, day)
    dayE.innerHTML = dayNames[ thisDate.getDay() ] +", ";
    dayE.innerHTML += monthNames[ thisDate.getMonth() ] +" ";
    dayE.innerHTML += " " +day;

    // Function determining which ending to use for the date and displaying it
    switch (day)
    {
        case 1:
        case 21:
        case 31:
            ordinalE.innerHTML += "st";
            break;
        case 2:
        case 22:
            ordinalE.innerHTML += "nd";
            break;
        case 3:
        case 23:
            ordinalE.innerHTML += "rd";
            break;
        default:
            ordinalE.innerHTML += "th";
    }

    // Display the year
    yearE.innerHTML = ", " +thisDate.getFullYear();
}


function getDayTitle( i )
{
    var dayTitle;
    var dayOfWeek = addDays( thisDate, i )
    var d = dayOfWeek.getDay();

    if( d > 6 )
    {
        d -= 7;
    }

    // Function determining which title to use (today, tomorrow, day of the week)
    switch ( i )
    {
        case 0:
            dayTitle = "Today";
            break;
        case 1:
            dayTitle = "Tomorrow";
            break;
        default:
            dayTitle = dayNames[d];
    }
    return dayTitle;
}


function displayForecast()
{
    for( i=0; i < pList.length; i++)
    {
        displayDailyForecast( i );
    }
}


function displayDailyForecast( i )
{
    var forecastE = document.getElementById( pList[i] );
    var forecast = fList[ randomNumber(0,3) ];
    var html = "<table>";

    if( i == 0)
    {
        html += "<tr><td id='spacerCell'></td></tr>"
    }

    html += "<tr><th colspan='2'>" + getDayTitle(i) + "</th></tr>";

    html += "<tr><td colspan='2'><img src='images/" + forecast.image + "' width='100' height='100'></td></tr>";

    html += "<tr><td colspan='2'>" + forecast.title + "</td></tr>";

    getTemp( forecast.minTemp, forecast.maxTemp );
    html += "<tr><td class='tempLow'>"+ low +"°C</td>";
    html += "<td class='tempHigh'>"+ high +"°C</td></tr>";

    forecastE.innerHTML += html;
}


function getTemp( min, max )
{
    var t1, t2;

    t1 = randomNumber( min, max );
    t2 = randomNumber( min, max );

    if( t1 < t2 )
    {
        low = t1;
        high = t2;
    }
    else if( t1 > t2 )
    {
        low = t2;
        high = t1;
    }
    else // if t1==t2
    {
        low = t1;
        high = t1 + 1;
    }
}
javascriptcss

Answer №1

Check it out here. Utilize the padding property for creating padding, instead of using a spacercell td to center things. It is also recommended to stick with just one js file.

UPDATE: Made some fixes. You previously used a .content selector instead of a #content selector in your css. The revised version can be viewed here.

Answer №2

Have you considered using div tags instead of table tags for days? This way, you can have more control over the positioning of inner elements without relying on relative positions.

You can place div tags inside day0 / day1 etc tags with absolute position and then set the text using divId.innerHTML = getDayTitle(i) (along with your respective methods). This approach eliminates the need to generate an entire table through JS.

Additionally, tables may cause issues if you ever decide to change the font or text size in the future because they rely on a "fit to contents" method. Using div tags can help avoid these problems.

Give div tags a try - it's a more flexible solution that should work well for your needs :)

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

Creating a User-friendly Layout for Admin Pages in Next.js Version 13

Hey there, I'm facing an issue with the layout while using Next.js 13 Experimental App Directory. On my website's index page or routes '/', I want to show a landing page and use a specific layout for all pages except for those under the ...

javascriptreactjstypescriptnext.js

jQuery behaving erratically following deployment to the testing server

I am encountering an issue with jQuery in a user control that utilizes a Telerik RadGrid: <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script> <script type="text/javascript"> ...

javascriptjqueryasp.netajaxtelerik-grid

Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size change ...

javascripthtmlcss

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

Tips for implementing custom styles on React components that have been imported locally

I'm currently struggling with applying CSS successfully to components imported from an npm library. My main challenge seems to be my use of css-loader in the react starter kit (https://github.com/kriasoft/react-starter-kit) without a full understandin ...

cssreactjsnpmcss-loader

Go back to the top by clicking on the image

Can you help me with a quick query? Is it feasible to automatically scroll back to the top after clicking on an image that serves as a reference to jQuery content? For instance, if I select an image in the "Portfolio" section of , I would like to be tak ...

javascriptjqueryhtmlreturnanchor

Passing a parameter from a redirect function to an onClick in React using TypeScript

I am facing a challenge in passing a parameter to my redirectSingleLocker function. This function is intended to take me to the detailed page of a specific locker, identified by a guid. The lockerData.map method is used to display all the JSON data in a ta ...

javascriptjsonreactjstypescript

What is the best way to send JavaScript data to PHP?

Is it possible to post a variable to a PHP script without refreshing the page? If so, how can this be achieved? Here is an example using jQuery: $.ajax({ url: "myphpfile.php", type: "post", data: json/array/whatever, success: function(){ ...

phpjavascriptajaxgreasemonkey

Click on the div to automatically insert its text into the textarea

I am looking for a way to enable users to edit their posts easily. My idea is to have them click on a link, which will then hide the original div containing their post and reveal a new div with the old text inside a textarea for editing. Despite searching ...

javascriptjqueryhtml

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

css

Incorporating tab navigation and drawer navigation in a React Native Expo application

I am encountering a warning in my react native expo app that uses react navigation 6. Even though I am able to display the tabs and the drawer, I keep getting this console alert: Found screens with the same name nested inside one another. Check Home, Home ...

javascriptreactjsreact-nativereact-navigation

Setting a date in Angular Material 2 without closing the mdMenu

I am trying to interact with Material 2's menu. Is there a way to select a menu item without closing the menu popup? Check out this link for more information. ...

javascriptangularangular-material

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

My task is to develop a web application using HTML, CSS, and JS with the following functionality: Retrieve a list of users from this API: https://jsonplaceholder.typicode.com/users. Upon clicking on a user, show a list of albums associated with that user ...

javascripthtmlcssjsonajax

The system has encountered an issue: "EntityMetadataNotFound: Unable to locate metadata for the entity named 'User

Just wanted to reach out as I've been encountering an issue with my ExpressJS app recently. A few days ago, everything was running smoothly without any errors. However, now I'm getting a frustrating EntityMetadataNotFound: No metadata for "User" ...

javascriptnode.jstypescripttypeorm

Preserve information on page reload in AngularJS

I am currently working on an AngularJS application with Spring REST as the backend. My experience with AngularJS is quite new. Within my UI page, I have a table displaying a list of objects with an edit button for each record. Clicking the edit button ope ...

javascriptjavaangularjsspring-rest

Troubleshooting problem with the oninput function of a custom JavaScript element

Assume I have a unique requirement to trigger a function within a custom element. The goal is to update text in the element only when a slider is moved within that specific element. Here's an example implementation in the main.js file: class Oninput ...

javascript

Troubleshooting: Else block not functioning as expected within a React JS map function

I have a notification feature that makes an API call every 10 seconds to display an alert based on the response. However, I'm encountering an issue where the div is not being rendered properly. The div should be displayed based on certain conditions w ...

javascriptreactjs

I could use some assistance with deciphering JSON data

After using console.log to display the data I received, I observed an object structured as follows (I trimmed some details for clarity and used ... to indicate repetitive information): [ Submission { title: 'Untitled', content: { ur ...

javascriptjsonnode.jsparsing

What is the best way to export image paths using require() from a single index.js file in a React Native project?

I am looking for a way to efficiently export all images from a single file named index.js, so that in the future, if I need to change the path of an image, I only have to make changes in one file. For example: export {default as avatar} from './avata ...

javascriptreactjsreact-nativeimage

What are some alternative ways to link a local MongoDB database to my Android Studio application instead of using MongoLab?

Can someone please help me figure out how to connect my Android Studio project to a MongoDB database stored locally on my PC? I've been searching for solutions that don't involve using MLab, but I haven't had any luck. I've attempted f ...

javascriptandroidnode.jsmongodbandroid-studio