These are chat archives for FreeCodeCamp/Help

28th
Mar 2019
nsonhouse
@nsonhouse
Mar 28 01:46
@bradtaniguchi I made a little progress, but I know the way I am doing this is totally wrong. For now I just want to get it working. So here is what I did.
res.send(recordset)
So now the database info renders as JSON. This is NOT what I need to do. I need to res.render('index.ejs') and write the contents of the database to a div.
nsonhouse
@nsonhouse
Mar 28 01:54
@cmccormack Any wisdom you can share?
Brad
@bradtaniguchi
Mar 28 01:56
@nsonhouse if the json is showing properly you might actually be doing it 100% correct. The only thing is the index.ejs is what again? Are you to update a template and return the rendered html, or is the html you serve static and it uses client-side JS to load the data from your endpoint?
nsonhouse
@nsonhouse
Mar 28 01:58
So index.ejs has a table. When the page loads the contents of the database need to populate the table.
image.png
NO BUENO
Brad
@bradtaniguchi
Mar 28 02:04
what the heck is index.ejs? Your saying it has a table, but like its javascript, or some template thing?
nsonhouse
@nsonhouse
Mar 28 02:07
So yeah. Im using ejs as my view engine. There is a table on that page.
abraham anak agung
@padunk
Mar 28 04:16
I'm just about to ask, do people or company still using template in their website? like this ejs?
@Malik
@Malik84821897_twitter
Mar 28 06:57

@Malik84821897_twitter
hello everyone.I am facing issue while coding a simple game of TIC TOC
can any friend help me
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tic Toc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>

<body>
<div id="user">
Select your favriout symbol
<div id="select">
<img src="cross.svg" alt="cross" id="cross" onclick="firstFunction()">
<img src="check.svg" alt="check" id="check" onclick="secondFunction()">
</div>
</div>
<div id="game">
<h1>Tic Toc</h1>
<table>
<tr>
<td id="1">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="up" id="2">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="3">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
</tr>
<tr>
<td id="upper" id="4">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="middle" id="5">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="lower" id="6">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
</tr>
<tr>
<td id="7">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="down" id="8">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
<td id="9">
<img src="cross.svg" alt="cross" class="cross">
<img src="check.svg" alt="check" class="check">
</td>
</tr>
</table>
</div>
</body>
</html>
"strit"

function firstFunction(){

var playerOne = document.getElementById("cross").value;

alert("You Selected Cross symbol for your turn");

document.getElementById("user").style.display="none";

document.getElementById("game").style.display="block";

switch(playerOne){
case "":
document.getElementsByClassName("cross").style.display="block";
break;
}

}

function secondFunction(){

var playerTwo = document.getElementById("check").value;

alert("You Selected Check symbol for you turn");

document.getElementById("user").style.display="none";

document.getElementById("game").style.display="block";

}

Jake
@JakeDVirus
Mar 28 10:42
is nested media query supported in all browers? is there any downside to use that?
Brad
@bradtaniguchi
Mar 28 17:40
@nsonhouse So you render the html from the file? You should look into the documentation for the view engine on how to insert data, so you will need to add the data to the table template (ejs) and get the resulting html/text and you return that to the user. This is called server side render, it was the most common approach to returning dynamic data to users before the rise of client-side app based code. (React, Angular, Vue, backbone, etc)
Magdaline Sisungo
@magdalinesisungo
Mar 28 18:37
Help me this quiz please guys.
Your a element should be nested within your new p element.
Your p element should have the text "View more " (with a space after it).
Christopher McCormack
@cmccormack
Mar 28 19:46
@magdalinesisungo sorry what's the question here?
nsonhouse
@nsonhouse
Mar 28 19:52
@bradtaniguchi BTW Thank you for your input. I know we have been going back and forth with this. With all that you have stated, I want to know what is the best approach to accomplish this. Am I going about it the right way?
Brad
@bradtaniguchi
Mar 28 20:42
@nsonhouse Yes, but you will need to make sure you understand why you are using callbacks/promises in Javascript to perform async actions. Its arguably the key trait of JS, in how it handles async actions. Its the reason why the language is fast even though there is only 1 process most of the time. There is no such thing as "waiting" in JS
nsonhouse
@nsonhouse
Mar 28 20:59
@bradtaniguchi I understand that it is the passing of one function to another function to be called at a later time. But the only visual reference I have is the spinning loading graphic that is displayed until page content is rendered. Otherwise I have no frame of reference of its importance.
Brad
@bradtaniguchi
Mar 28 21:26
Not sure what your asking
Kaz Baig
@kbaig
Mar 28 21:29
@JakeDVirus afaik it's not part of the css spec
you can do it in preprocessors though