Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Creating a scheduler - Need some help with database

    Hi,
    So i've been working to make a scheduler and i've tried a lot of different code, but it always returns up an error to me especially when i work on the server.
    Can someone help me?
    These are my codes, there are a lot of comments because I was trying around

    JanWeek1.html
    Code:
    <!DOCTYPE html>
    
    <!--
    
    Scheduler
    -->
    
    <html>
    <head>
    <script type="text/javascript" src="J,week1.js"></script>
    <style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    
    tr:nth-child(even) {
        background-color: #dddddd;
    }    
        
    * {box-sizing:border-box;}
    ul {list-style-type: none;}
    body {font-family: Verdana,sans-serif;}
    
        
        
    .month {
        padding: 70px 25px; 
        width: 100%;
        background: #3366ff;
    }
    
    .month ul {
        margin: 0;
        padding: 0;
    }
    
    .month ul li {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    
    .month .prev {
        float: left;
        padding-top: 10px;
    }
    
    .month .next {
        float: right;
        padding-top: 10px;
    }
    
       
        
    .weekdays {
        margin: 0;
        padding: 10px 0;
        background-color: #ddd;
    }
    
    .weekdays li {
        display: inline-block;
        width: 13.6%;
        color: #666;
        text-align: center;
    }
    
    .days {
        padding: 10px 0;
        background: #eee;
        margin: 0;
    }
    
    .days li {
        list-style-type: none;
        display: block;
        width: 3%;
        text-align: center;
        margin-bottom: 10px;
        font-size:12px;
        color: #777;
    }
    
    .days li .active {
        padding: 5px;
        background: #1abc9c;
        color: white !important
    }
    
    /* Add media queries for smaller screens */
    @media screen and (max-width:720px) {
        .weekdays li, .days li {width: 13.1%;}
    }
    
    @media screen and (max-width: 420px) {
        .weekdays li, .days li {width: 12.5%;}
        .days li .active {padding: 2px;}
    }
    
    @media screen and (max-width: 290px) {
        .weekdays li, .days li {width: 12.2%;}
    }
    </style>
    </head>
        
    <html>
        <link rel="stylesheet" href="../style.css" media="screen">
     <body>
        <main>
          <div class="add-note-button-container">
            <button id="add-note-button">+</button>
          </div>
    
        </main>
    
        <div id="modal-backdrop" class="hidden"></div>
        <div id="add-note-modal" class="hidden">
          <div class="modal-dialog">
    
            <div class="modal-header">
              <h3><center>Add Something in Your Scheduler!</center></h3>
              <button type="button" class="modal-close-button">&times;</button>
            </div>
    
            <div class="modal-body">
              
            
             <!--  <div class="todo-input-element">
                <label for="todo-input-who">Who</label>
                <input type="text" id="todo-input-who">
              </div> -->
    
              <div class="todo-input-element">
                <label for="todo-input-details">To Do </label>
                <textarea id="todo-input-details"></textarea>
              </div>
            </div>
              
              <div class="date">
              <select id="time">
                    <option value="0">00:00</option>
                    <option value="1">01:00</option>
                    <option value="2">02:00</option>
                    <option value="3">03:00</option>
                    <option value="4">04:00</option>
                    <option value="5">05:00</option>
                    <option value="6">06:00</option>
                    <option value="7">07:00</option>
                    <option value="8">08:00</option>
                    <option value="9">09:00</option>
                    <option value="10">10:00</option>
                    <option value="11">11:00</option>
                    <option value="12">12:00</option>
                    <option value="13">13:00</option>
                    <option value="14">14:00</option>
                    <option value="15">15:00</option>
                    <option value="16">16:00</option>
                    <option value="17">17:00</option>
                    <option value="18">18:00</option>
                    <option value="19">19:00</option>
                    <option value="20">20:00</option>
                    <option value="21">21:00</option>
                    <option value="22">22:00</option>
                    <option value="23">23:00</option>
                    <option value="24">24:00</option>
                  </select>
              </div>
              
              
              <div class="day">
              <select id="days">
                    <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>
                    <option value="7">Sunday</option>
                    
                  </select>
              </div>
            <div class="modal-footer">
              <button type="button" class="modal-cancel-button">Cancel</button>
              <button type="button" class="modal-accept-button">Add ToDo</button>
            </div>
    
          </div>
        </div>
    
      </body>
    
      <script src="index.js"></script>
    
    </html>
    
    
    
    <h1>Scheduler</h1>
    
    <div class="month">      
      <ul>
          <!--<li><a href="prev">❮</a></li>
          <li><a href="next">❯</a></li>-->
        <li class="prev">❮</li>
        <li class="next">❯</li>
        <li style="text-align:center">
          January, Week 1<br>
          <span style="font-size:18px">2016</span>
        </li>
      </ul>
    </div>
        
    
        
    <table>
            <tr>
        <th></th>
        <th>Monday, January 1</th>
        <th>Tuesday, January 2</th>
        <th>Wendesday, January 3</th>
        <th>Thursday, January 4</th>
        <th>Friday, January 5</th>
        <th>Saturday, January 6</th>
        <th>Sunday, January 7</th>
      </tr>
            <tr>
        <th>00:00</th>
        <th id="1"></th>
        <th id="2"></th>
        <th id="3"></th>
        <th id="4"></th>
        <th id="5"></th>
        <th id="6"></th>
        <th id="7"></th>
      </tr>
            
            <tr>
        <th>01:00</th>
        <th id="8"></th>
        <th id="9"></th>
        <th id="10"></th>
        <th id="11"></th>
        <th id="12"></th>
        <th id="13"></th>
        <th id="14"></th>
      </tr>
            
            <tr>
        <th>02:00</th>
        <th id="15"></th>
        <th id="16"></th>
        <th id="17"></th>
        <th id="18"></th>
        <th id="19"></th>
        <th id="20"></th>
        <th id="21"></th>
      </tr>
            
            <tr>
        <th>03:00</th>
        <th id="22"></th>
        <th id="23"></th>
        <th id="24"></th>
        <th id="25"></th>
        <th id="26"></th>
        <th id="27"></th>
        <th id="28"></th>
      </tr>
            
            <tr>
        <th>04:00</th>
        <th id="29"></th>
        <th id="30"></th>
        <th id="31"></th>
        <th id="32"></th>
        <th id="33"></th>
        <th id="34"></th>
        <th id="35"></th>
      </tr>
            
            <tr>
        <th>05:00</th>
        <th id="36"></th>
        <th id="37"></th>
        <th id="38"></th>
        <th id="39"></th>
        <th id="40"></th>
        <th id="41"></th>
        <th id="42"></th>
      </tr>
            
            <tr>
        <th>06:00</th>
        <th id="43"></th>
        <th id="44"></th>
        <th id="45"></th>
        <th id="46"></th>
        <th id="47"></th>
        <th id="48"></th>
        <th id="49"></th>
      </tr>
            
            <tr>
        <th>07:00</th>
        <th id="50"></th>
        <th id="51"></th>
        <th id="52"></th>
        <th id="53"></th>
        <th id="54"></th>
        <th id="55"></th>
        <th id="56"></th>
      </tr>
            
            <tr>
        <th>08:00</th>
        <th id="57"></th>
        <th id="58"></th>
        <th id="59"></th>
        <th id="60"></th>
        <th id="61"></th>
        <th id="62"></th>
        <th id="63"></th>
      </tr>
            
            <tr>
        <th>09:00</th>
        <th id="64"></th>
        <th id="65"></th>
        <th id="66"></th>
        <th id="67"></th>
        <th id="68"></th>
        <th id="69"></th>
        <th id="70"></th>
      </tr>
            
            <tr>
        <th>10:00</th>
        <th id="71"></th>
        <th id="72"></th>
        <th id="73"></th>
        <th id="74"></th>
        <th id="75"></th>
        <th id="76"></th>
        <th id="77"></th>
      </tr>
            
            <tr>
        <th>11:00</th>
        <th id="78"></th>
        <th id="79"></th>
        <th id="80"></th>
        <th id="81"></th>
        <th id="82"></th>
        <th id="83"></th>
        <th id="84"></th>
      </tr>
            
            <tr>
        <th>12:00</th>
        <th id="85"></th>
        <th id="86"></th>
        <th id="87"></th>
        <th id="88"></th>
        <th id="89"></th>
        <th id="90"></th>
        <th id="91"></th>
      </tr>
            
            <tr>
        <th>13:00</th>
        <th id="92"></th>
        <th id="93"></th>
        <th id="94"></th>
        <th id="95"></th>
        <th id="96"></th>
        <th id="97"></th>
        <th id="98"></th>
      </tr>
            
            <tr>
        <th>14:00</th>
        <th id="99"></th>
        <th id="100"></th>
        <th id="101"></th>
        <th id="102"></th>
        <th id="103"></th>
        <th id="104"></th>
        <th id="105"></th>
      </tr>
            
            <tr>
        <th>15:00</th>
        <th id="106"></th>
        <th id="107"></th>
        <th id="108"></th>
        <th id="109"></th>
        <th id="110"></th>
        <th id="111"></th>
        <th id="112"></th>
      </tr>
            
            <tr>
        <th>16:00</th>
        <th id="113"></th>
        <th id="114"></th>
        <th id="115"></th>
        <th id="116"></th>
        <th id="117"></th>
        <th id="118"></th>
        <th id="119"></th>
      </tr>
            
            <tr>
        <th>17:00</th>
        <th id="120"></th>
        <th id="121"></th>
        <th id="122"></th>
        <th id="123"></th>
        <th id="124"></th>
        <th id="125"></th>
        <th id="126"></th>
      </tr>
            
            <tr>
        <th>18:00</th>
        <th id="127"></th>
        <th id="128"></th>
        <th id="129"></th>
        <th id="130"></th>
        <th id="131"></th>
        <th id="132"></th>
        <th id="133"></th>
      </tr>
            
            <tr>
        <th>19:00</th>
        <th id="134"></th>
        <th id="135"></th>
        <th id="136"></th>
        <th id="137"></th>
        <th id="138"></th>
        <th id="139"></th>
        <th id="140"></th>
      </tr>
            
            <tr>
        <th>20:00</th>
        <th id="141"></th>
        <th id="142"></th>
        <th id="143"></th>
        <th id="144"></th>
        <th id="145"></th>
        <th id="146"></th>
        <th id="147"></th>
      </tr>
            
            <tr>
        <th>21:00</th>
        <th id="148"></th>
        <th id="149"></th>
        <th id="150"></th>
        <th id="151"></th>
        <th id="152"></th>
        <th id="153"></th>
        <th id="154"></th>
      </tr>
            
            <tr>
        <th>22:00</th>
        <th id="155"></th>
        <th id="156"></th>
        <th id="157"></th>
        <th id="158"></th>
        <th id="159"></th>
        <th id="160"></th>
        <th id="161"></th>
      </tr>
            
            <tr>
        <th>23:00</th>
        <th id="162"></th>
        <th id="163"></th>
        <th id="164"></th>
        <th id="165"></th>
        <th id="166"></th>
        <th id="167"></th>
        <th id="168"></th>
      </tr>
            
            <tr>
        <th>24:00</th>
        <th id="169"></th>
        <th id="170"></th>
        <th id="171"></th>
        <th id="172"></th>
        <th id="173"></th>
        <th id="174"></th>
        <th id="175"></th>
      </tr>
        </table>
          
            
    
    
    </body>
    </html>
    server.js
    Code:
    /*
     * Here, you should 	write a simple server to serve files statically.
     */
    
    var path = require('path');
    var mysql = require('mysql');
    
    var staticDir = path.join(__dirname, 'public');
    var indexFilename = 'indexschedule.html';
    var notFoundFilename = '404.html';
    var port = process.env.PORT || 3000;
    
    var http = require("http");
    var fs = require('fs');
    
    /*var mysqlHost = "oniddb.cws.oregonstate.edu";
    var mysqlUser = "liestyoa-db";
    var mysqlPassword = "f40SXm08SUJiEhp9";
    var mysqlDB = "liestyoa-db";
    var mysqlConnection = mysql.createConnection({
        host: mysqlHost,
        user: mysqlUser,
        password: mysqlPassword,
        database: mysqlDB
    });
    
    mysqlConnection.connect(function(err) {
        if(err) {
            console.log("== unable to make connections to MYSQL database")
            //throw err;
        }
    });
    */
    var index;
    fs.readFile('public/indexschedule.html', function(err, data) {
        if (err){
            throw err;
        }
        index = data;
    });
    
    var style
    fs.readFile('style.css', function(err, data) {
            if(err){
                throw err;
            }
        style = data;
    })
    
    var week1;
    fs.readFile('public/JanWeek1.html', function(err, data) {
        
        if (err){
            throw err;
        }
    
    /*    mysqlConnection.query("SElECT * FROM week1", function(err, rows){
        if(err) {
            console.log("== Error fetching people from database:", err);
            console.log("Error fetching people from database: " + err);
        }
        else {
            global.globaldata = rows;
            //mysqlConnection.end();
        }
        }); 
        */
        week1 = data;
    });
    
    var week2;
    fs.readFile('public/JanWeek2.html', function(err, data) {
        if (err){
            throw err;
        }
        week2 = data;
    });
    
    var week3;
    fs.readFile('public/JanWeek3.html', function(err, data) {
        if (err){
            throw err;
        }
        week3 = data;
    });
    
    var week4;
    fs.readFile('public/JanWeek4.html', function(err, data) {
        if (err){
            throw err;
        }
        week4 = data;
    });
    
    var week5;
    fs.readFile('public/JanWeek5.html', function(err, data) {
        if (err){
            throw err;
        }
        week5 = data;
    });
    
    var js1;
    fs.readFile('public/J,week1.js', function(err, data) {
        if (err){
            throw err;
        }
        js1 = data;
    });
    
    var indexjs;
    fs.readFile('public/index.js', function(err, data) {
        if (err){
            throw err;
        }
        indexjs = data;
    });
    var four_oh_four;
    fs.readFile('public/404.html', function(err, data) {
        if (err){
            throw err;
        }
        four_oh_four = data;
    });
    
    var server = http.createServer(function (request, resp) {
    	
    
    	switch(request.url) {
            case "/index.js":
                resp.writeHead(200, {"Content-Type": "text/javascript", "Cache-Control": "public"});
    			resp.write(indexjs);
    			resp.end();
    			break;
            case "/J,week1.js":
                resp.writeHead(200, {"Content-Type": "text/javascript", "Cache-Control": "public"});
    			resp.write(js1);
    			resp.end();
    			break;
            case "/style.css":
    			resp.writeHead(200, {"Content-Type": "text/css", "Cache-Control": "public"});
    			resp.write(style);
    			resp.end();
    			break;
                
             case "/":
    			resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
    			resp.write(index);
    			resp.end();
    			break;
    		case "/indexschedule.html":
    			resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
    			resp.write(index);
    			resp.end();
    			break;
    
            case "/index.html": 
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(index);
                resp.end();
                break;
    
            case "/JanWeek1.html":
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(week1);
                resp.end();
                break;
    
            case "/JanWeek2.html":
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(week2);
                resp.end();
                break;
    
            case "/JanWeek3.html":
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(week3);
                resp.end();
                break;
    
            case "/JanWeek4.html":
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(week4);
                resp.end();
                break;
    
            case "/JanWeek5.html":
                resp.writeHead(200, {"Content-Type": "text/html", "Cache-Control": "public"});
                resp.write(week5);
                resp.end();
                break;
    
    		default:
    			resp.writeHead(404, {"Content-Type": "text/html", "Cache-Control": "public"});
    			resp.write(four_oh_four);
    			resp.end();
    
    	}
    	//resp.end();
    });
    
    server.listen(port);
    index.js
    Code:
    /*
     * Add your JS in this file.
     */
    
    //alert("I'm trying so haaaaaaaaaaaaaaaaaard");
    
    var modal = document.getElementById('modal-backdrop');
    var modal2 = document.getElementById('add-note-modal')
    var what_box = document.getElementById('todo-input-what');
    var remove = document.getElementsByClassName("dismiss-button");
    var mama = document.getElementsByTagName("main");
    
    var add_button =document.getElementById("add-note-button");
    var cancel_button = document.getElementsByClassName("modal-cancel-button");
    var close_button = document.getElementsByClassName("modal-close-button");
    var aw_button = document.getElementsByClassName("modal-accept-button");
    //add_button.onclick=openadd();	
    add_button.addEventListener("click",openadd);
    function openadd() {
    	modal.className="add-note-modal";
    	modal2.className="add-note-modal";
    }
    	
    function closeadd() {
    	modal.className="hidden";
    	modal2.className="hidden";
    	
    	document.getElementById("todo-input-details").value = "";
    
    }
    
    aw_button[0].addEventListener("click",validation);
    //aw_button[0].addEventListener("click",create_todo);
    close_button[0].addEventListener("click",closeadd);
    cancel_button[0].addEventListener("click",closeadd);
    
    function create_todo() {
        var input_details = document.getElementById("todo-input-details").value;
        var time = document.getElementById("time").selectedIndex;
        var date = document.getElementById("days").selectedIndex;
        var num1 = parseInt(time);
        num1 = num1*7;
        var num2 = parseInt(date);
        var temp = num1+num2+1;
        //alert(temp);
        var temp2 = temp.toString();
        var temp3 = document.getElementById(temp2);
        temp3.innerHTML = input_details;
       
    	closeadd();
    }
    
    for(i=0;i<remove.length;i++)
    {
    	remove[i].addEventListener("click" , delete_todo, false);
    }
    function delete_todo(event){
    
    	event.currentTarget.parentNode.parentNode.removeChild(event.currentTarget.parentNode);
    }
    
    function validation(){
    
    	var what_box = document.getElementById('todo-input-details');
    
    	if(what_box.value == "") {
    		alert("The what box cannot be empty!!!")
    		return false;
    	} else {
    		return create_todo();
    	}
    
    }

    We created this J,week1.js for the server but it doesnt work so we commented first I need help witht his we used SQL before
    Code:
    //for(i=1; i < 176; 1++) {
    //    mysqlConnection.query("SELECT table)
    //}
    
    /* mysqlConnection.query("SElECT * from week1", function(err, rows){
        if(err) {
            console.log("== Error fetching people from database:", err);
            res.status(500).send("Error fetching people from database: " + err);
        }
        else {
            var id;
            rows.forEach(function(row) {
                id = getElementById(row.Table_id);
                id.write(row.table_data);
            })
        }
    }) */
    
    /*globaldata.ForEach(function(row) {
        id = getElementById(row.Table_id);
        id.write(row.table_data);
    }) */

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,122
    Thanks
    37
    Thanked 1,089 Times in 1,085 Posts
    First thing you need to do is fix your HTML
    This is an error
    Code:
      </body>   <= You end the body here. Nothing should come after.
      <script src="index.js"></script>   <= Call the JS before the </body> tag
    </html>  There should be nothing after this. You have a large amount of code after this.
    This happens in another spot. Find and correct that also.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •