I am a beginner, trying to teach myself code. I know HTML and have recently learnt the basics of Javascript syntax and bootstrap - I realise the best way to learn is to build something. So I am trying to build a website where users can search for famous people to see what books they recommend. For example, if I want to know what books Elon Musk would recommend, I should be able to type in his name and it would take me to a page where there is a list of all books recommended by him.
I have the index page ready looking something like google, and I am trying to understand how I can have the search bar functioning so people can search through all the pages I would build. I realise I need the auto complete feature to work so people can type in the first few letters of the person's name and click on the suggestion to go to the page.
Here's my code so far:
#content {height: 100%;}
html, body {height: 100%;}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap JS from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap CSS from CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="images/logo.png" width="270" height="95" alt="Google" id="logo"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li>Submit</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Privacy</li>
<li>Donate</li>
</ul>
</div>
</div>
</div>
</body>
</html>
as you said, best way to learn is building something on your own from scratch. To create the functionality you described you need:
server for responding to the requests made by browser. I suggest starting with Node js especially with express (https://expressjs.com/). It's really simple to install and get started.
database (or just static json file) with node you can use for example Mongo db with Mongoose (http://mongoosejs.com/)
front-end framework and libraries you are using bootstrap which is fine! Add React js (https://facebook.github.io/react/) to that and you are ready to go!
So my suggestion is to use those libraries/frameworks and learn just bit by bit. Start from server and try creating some basic pages (or just page). You can fetch the autocomplete data then with AJAX techinque. React has lot of well written components and for example for ajax autocomplete you can use this: https://jedwatson.github.io/react-select/
Happy learning!
Related
I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly. I have tried to see the API of material design and tried to implement it but It did not work either.
Anyhelp would be really appreciated!
Thanks
<html>
<head>
<title>Parcel Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input
class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
type="email"
aria-controls="validation-msg"
required
/>
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<p
class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
role="alert"
>
Enter Valid Email
</p>
</form>
<script>
mdc.textField.MDCTextField.attachTo(
document.querySelector(".mdc-text-field")
);
</script>
</body>
</html>```
https://codesandbox.io/s/admiring-elion-kojst?file=/index.html
First off, jQuery wasn't needed. It didn't give any errors and it behaved the same, so I just removed it.
I found the manual here: https://material.io/develop/web/components/text-fields
If you look at the section titled:
Text field with helper text
Here you can seen the following example:
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input class="mdc-text-field__input" type="text"
aria-labelledby="my-label-id"
aria-controls="my-helper-id"
aria-describedby="my-helper-id">
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>
If you look carefully at the after the label, you will see some differences.
There is even more detailed information on how to use the helper text:
https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. This will make the helper text permanently visible, so you don't want that.
Here is the block you should have instead of the p element after the label:
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
Enter Valid Email
</div>
</div>
PS: would be great if you could include a link to the example you were following next time.
In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.
I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.
For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black.
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<p></br></br></br></p>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Resources</h2>
<h3 class="section-subheading text-muted">A Better way to learn Python.<h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
<p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
<p></br></br></br></p>
Sign Up Today!
</div>
<div class="col-md-6" style="text-align:center;">
<div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>
</div>
<div class = "row">
<p></br></p>
</div>
</div>
</section>
Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY
Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)
I have tried adding this under each section
<!-- About Section -->
<section id="about">
<div class="container" style="background-color: #ce0818;opacity:0.8;">
but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.
In context of our resources - you should put that background css to the section div not in container div
<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">
and to change the background to light grey write it in tag like
<body style="background:#cccccc !important;">
This is inline method which is not preferred much . You can use external css and write your css there and include that file in page
To use an external style sheet, add a link to it in the section of the HTML page:
example:
<link rel="stylesheet" href="styles.css">
and write
body{
background:#cccccc;
}
#about{
background: #24242a;
padding: 60px 0;
text-align: center;
}
or can include that css code in that page inside head tag example:
<head>
<style>
//write your style code here
</style>
</head>
teachyourself have that css written in css/main.css file
Can I use handlebars to create template or module structure like this
<div id="container">
<div id="left">
//include module A src
</div>
<div id="right">
//include module B src
</div>
</div>
If it cannot, what is a good template engine that can couple with nodejs do achieve the above? I come from java web framework, and this can be achieve very easy but it is not so apparent here.
Check partial section of handlebarsjs docs.
So first you register the partials:
Handlebars.registerPartial('moduleA', fs.readFileSync('moduleA.html'));
Handlebars.registerPartial('moduleB', fs.readFileSync('moduleB.html'));
Then in the html you do this:
<div id="container">
<div id="left">
{{> moduleA}}
</div>
<div id="right">
{{> moduleB}}
</div>
</div>
I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:
<div class="hero-unit">
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 80%;">80%</div>
</div>
</div>
</div>
Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I've tried to fix it but had no luck.
Thank you.
It is the line-height: 30px on hero-unit which causes the problem.
I've change the code like this:
<div class="hero-unit" style="line-height: inherit">
Of course it is better to assign a class to it, instead of using the style attribute.
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!! UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.