I recently found this package named vocabulary-level-grader in NPM and it really stood out to me, so I decided to make a website on it.
Here's the github link for the package.
And this is my code so far:
<head>
<meta charset="UTF-8">
<meta name="description" content="A simple and lightweight essay writer.">
<meta name="keywords" content="Essay, Generater, AI, School, OpenAI, Essay Writer">
<meta name="author" content="Rehan Raj">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1520413152607686"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="narrow-jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<title>....</title>
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
#font-face {
font-family: 'rbicon';
src: url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format("woff2");
font-weight: normal;
font-style: normal;
}
</style>
</head>
<div class="title">
<br>
</div>
</head>
<body data-new-gr-c-s-check-loaded="14.1091.0" data-gr-ext-installed="" data-new-gr-c-s-loaded="14.1091.0"
style="text-decoration-color: rgb(46, 46, 46); background-color: rgb(250, 250, 250); color: rgb(0, 0, 0);">
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills float-right">
<li class="nav-item">
<a class="nav-link active button button2" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="#form" id="a1" onClick="document.getElementById('form1').scrollIntoView();">Start
writing</a>
</li>
</ul>
</nav>
<h3 class="text-muted">- <b>...</b></h3>
</div>
<div class="jumbotron" style="background: rgb(41,144,99);
background: linear-gradient(90deg, rgba(41,144,99,1) 16%, rgba(18,208,121,1) 50%, rgba(41,144,99,1) 83%);">
<h8 class="display-3" style="width: 200x; text-decoration-color: rgb(0, 128, 255); color:aliceblue"><strong>Lorem ipsum....</strong></h8>
<br>
<br>
<h1 class="lead" style="color:aliceblue">lorem ipsum</h1>
</div>
<div id="form1" class="form-group">
<form id="frm1" target="dummyframe">
<p for="topic" class="text-center" style="font-size: x-large;">Write a short (25 words) essay in the
language you're learning!</p>
<p for="topic" class="text-center" style="font-size:medium">English only, please.</p>
<textarea id="input1" rows="5" cols="60" type="textarea" class="form-control"
placeholder="E.g: homework, cancer etc." style="resize: none; align-items: center; align-self: center; align-content: center; width:600; position: absolute;
left: 50%;
transform: translateX(-50%);"></textarea>
<br><br><br><br><br><br>
<p class="text-center" style="font-size:large">
<b>Words:</b>
<span id="show">0</span><span id="show">/25</span>
</p>
<div id="buttons">
<input type="submit" id="startbutton" value="Check" class="btn btn-lg btn-success button button2"
onclick="score_test()" style="position: absolute;
left: 50%;
transform: translateX(-120%); border:none">
<button id="copyButton" class="btn btn-lg btn-success button button2" style="background-color:blue; border:0ch; position: absolute;
left: 50%;
transform: translateX(5%); display: inline-block; " onclick="CopyToClipboard('demo')">Copy Score</button>
</div>
</form><br><br>
<div id="demo1">
<p id="demo"></p>
</div>
</div>
<script>
document.getElementById("show").style.color = "darkred";
document
.querySelector("#input1")
.addEventListener("input", function countWord() {
let res = [];
let str = this.value.replace(/[\t\n\r\.\?\!]/gm, " ").split(" ");
str.map((s) => {
let trimStr = s.trim();
if (trimStr.length > 0) {
res.push(trimStr);
}
});
document.querySelector("#show").innerText = res.length;
if (res.length < 10) {
document.getElementById("show").style.color = "darkred";
}
if (res.length < 25 && res.length > 10) {
document.getElementById("show").style.color = "red";
}
else if (res.length >= 25) {
document.getElementById("show").style.color = "darkgreen";
}
});
</script>
<script>
$('#a1,#a2').click(function () {
$('#frm1').effect('highlight', {}, 1000);
// $('#demo1').effect('highlight',{},1000);
$('#buttons').effect('highlight', {}, 1000);
});
</script>
<script>
function CopyToClipboard(id) {
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById("copyButton").innerHTML = "Copied!"
setTimeout(function () {
document.getElementById("copyButton").innerHTML = "Copy Score"
}, 1500)
}
</script>
<script>
function score_test() {
if (document.getElementById("show").style.color == "darkred" || document.getElementById("show").style.color == "red") {
console.log("test")
document.getElementById("startbutton").value = "Error!"
document.getElementById("startbutton").style.background = "red"
setTimeout(function () {
document.getElementById("startbutton").value = "Check"
document.getElementById("startbutton").style.background = "green"
}, 1500)
}
else {
const grade = require("vocabulary-level-grader")
const result = grade("
It was the hunter's first time outside Montana.
He woke, stricken still with the hours-old vision of ascending through rose-lit cumulus,
of houses and barns like specks deep in the snowed-in valleys,
all the scrolling country below looking December—brown and black hills streaked with snow,
flashes of iced-over lakes,
the long braids of a river gleaming at the bottom of a canyon.
Above the wing the sky had deepened to a blue so pure he knew it would bring tears to his eyes if he looked long enough.
");
}
}
</script>
<footer class="footer">
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
Test
<a class="fw-bold" href="#">...</a>
</div>
</footer>
</body>
The main part of the above code is:
const grade = require("vocabulary-level-grader")
const result = grade("
It was the hunter's first time outside Montana.
He woke, stricken still with the hours-old vision of ascending through rose-lit cumulus,
of houses and barns like specks deep in the snowed-in valleys,
all the scrolling country below looking December—brown and black hills streaked with snow,
flashes of iced-over lakes,
the long braids of a river gleaming at the bottom of a canyon.
Above the wing the sky had deepened to a blue so pure he knew it would bring tears to his eyes if he looked long enough.
");
the obvious issue is the fact that require does not work in normal javascript. I have tried many solutions such as jsDelivr on both ESM and Default, just to be met with these issues (added images for extra clarity): Uncaught ReferenceError: require is not defined at score_test (index.html:165:25) at HTMLInputElement.onclick (VM202 index.html:91:50)
first error image
and
Uncaught SyntaxError: The requested module '/npm/tlds#1.236.0/+esm' does not provide an export named 'default' (at jsdelivr-header.js:7:1)
second error image
I've also used alternatives such as browserify and unpkg, though unfortunately to no avail. Thanks in advance
Related
Been working on a home automation dashboard and I need some help. How do I get the image to change when the button is toggled ON and OFF. I have a sun svg for on and moon svg for off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<ol class="b">
<li class="dashboard_item kitchen">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item frontdoor" >
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ul>
</body>
</html>
<!-- variable in js -->
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
KitchenState = !KitchenState;
});
Been trying examples online with no luck so far.
Give some id attribute to the image and then change it in the same way like you are changing the innerHTML. For image you just need to change the src accordingly.
<script>
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
KitchenState = !KitchenState;
});
</script>
<img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">
use .setAttribute or .src
add id kitchen-icon to tag <img> icon
and try code:
var KitchenState = true;
var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'
KitchenState = !KitchenState;
})
From the point of view of your question, I think you need the following code
let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length
//Create a callback function for the click event of each button
for (let i = 0; i < btnAllLen; i++) {
!(function(n) { // Register click events
btnAll[n].addEventListener('click', function() {
for (let j = 0; j < btnAlllen; j++) {
btn[j].className = ""
conAll[j].style.display = "none"
}
this.className = "active"
conAll[n].style.display = "block"
})
})(i)
}
.main {
text-align: center;
}
button:focus {
outline: none;
}
nav {
margin-top: 30px;
box-sizing: border-box;
}
button {
background: white;
border: none;
height: 36px;
line-height: 36px;
width: 80px;
text-align: center;
border: 1px solid lightgray;
border-radius: 4px;
cursor: pointer;
}
nav>button:not(:first-child) {
margin-left: 15px;
}
.active {
background: black;
color: white;
}
.content {
margin-top: 40px;
}
.content>p {
display: none;
}
<div class="main">
<nav>
<button class="active">content 1</button>
<button>content 2</button>
<button>content 3</button>
<button>content 4</button>
</nav>
<div class="content">
<p style="display: block;">content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
</div>
</div>
New to coding and doing an interview challenge.
They've asked for a dashboard made from JQuery (which I've never used before).
Lots of help from W3schools and here in stack has me accomplished 100% of the functionality I need (even if the design could be improved: functionality first polish later!)
One of the bonus is to have some UI
/UX functionality, so I've made the divs dragable, and I added the snip below from https://jqueryui.com/resizable/ to make the divs resizable.
$(function()){
$( "resizable" ).resizable();
});
But when it runs, the little resize icon seems to do something different from the example on the page above.
Are there any ideas how I can fix it back into the resize icon, the way it is supposed to look?
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div{
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You simply did not use the jQuery-ui CSS file...
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
And you have a way too "wide" rule on div. So specific to the rezise handles, it needed an exception using the :not() selector.
div:not(.ui-resizable-handle){
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div:not(.ui-resizable-handle){ /* Added an exception to your generic rule */
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>
How do I make a modal visible with javascript? I don't want to do it using jquery. i just want it with javascript. And I don't want it to open when I click a button. I want it to be opened as a result of some operations in javascript. I made it with modal bootstrap. my codes are below.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="modal fade" tabindex="-1" id="sonucModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Test Durumu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="durum"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
<button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
</div>
</div>
</div>
</div>
<div class="container" style="height: 100vh;">
<div class="row" style="height: 100vh;">
<div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
<div class="card" style="width: 25rem; margin-top:20vh; ">
<div class="card-body" style="text-align: center;">
<h5 class="card-title text-primary">Soru</h5>
<span class="text-black-50 fs-5" id="soru"></span>
<input class="w-100 form-control mt-4" type="text" id="cevap"/>
<button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
</div>
<ul class="list-group list-group-flush">
<li id="anaCan" class="list-group-item fw-bold">Kalan Can: <span id="can"></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
javascript code:
var turkceCumleler = [
"Merhaba",
"İyi Sabahlar",
"İyi Günler",
"İyi Akşamlar",
"İyi Geceler",
"Tekrar Görüşmek Üzere(Yüz yüze)",
"Tekrar Görüşmek Üzere(Tel.)",
"Yakında Görüşürüz",
"Güle Güle"
];
var almancaCumleler = [
"hallo",
"guten morgen",
"guten tag",
"guten abend",
"gute nacht",
"auf wiedersehen",
"auf wiederhögen",
"bis bald",
"tschüss"
]
var sayilar = [];
var healt = 3;
const getQuestion = () =>{
document.getElementById('can').textContent=healt;
let rastgele = Math.floor(Math.random()*turkceCumleler.length);
if(sayilar.indexOf(rastgele) === -1){
sayilar.push(rastgele)
document.getElementById('soru').textContent = turkceCumleler[rastgele];
document.getElementById('cevap').value = ""
}else{
getQuestion();
}
if(sayilar.length === turkceCumleler.length){
//here i want modal to open
}
}
const compareQuestionAnswer = () =>{
if(document.getElementById('cevap').value === ''){
alert("boş geçilemez")
}else{
let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
if(deger === -1){
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}else{
let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
if(deger === deger1){
getQuestion();
}else{
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}
}
}
}
window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';
Bootstrap depends on jQuery, and you're already including jQuery in your code.
But if you want to create a modal without Bootstrap and jQuery, you can do so with CSS and JavaScript. Use an event listener to listen for whatever JavaScript event you desire, then show the modal when that event occurs.
Here is a simple example:
// Show the modal when you hover over the red box
trigger.onmouseover = () => {
modal.style.display = "block";
}
// Hide the modal when you click the close button
document.getElementsByClassName("close")[0].onclick = () => {
modal.style.display = "none";
}
// Hide the modal if you click outside of the modal area
window.onclick = (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
}
#trigger {
height: 100px;
width: 100px;
background-color: red;
}
.modal {
display: none; /* Hidden Initially */
position: fixed;
z-index: 1; /* Higher Z-Index To Sit On Top */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div id="modal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close">x</span>
<p>Modal content here</p>
</div>
</div>
<div id="trigger">
Move mouse into this box to trigger modal.
</div>
You just need to declare a new modal object, like:
const sonucModal= document.getElementById('sonucModal');
const modalEl = new bootstrap.Modal(sonucModal);
and then call it like this whenever you need to open it:
modalEl.show();
Here is a JSFiddle for reference, the modal opens automatically after 2 seconds.
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
I'm making a personal webpage and I'm using JavaScript to create a typing effect under a header called "My Story". The text types fine, but once it is done typing the cursor remains at the bottom. What do I need to change/add in my code to fix this?
I want the cursor to disappear once the text is type. No error messages are present.
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Maybe, try this? I'm adding pseudo-class:after, with content: '|' and removing the class at the end.
(function(){
/* cut the text for demo */
let text = "When I was 15, I took a Robotics Honors course at my high school."
let bubu = document.getElementById('bubu');
for( let i = 0; i < text.length; i++ ){
setTimeout( function(){
bubu.innerText += text.charAt(i);
}, i*100);
}
setTimeout(function(){
document.getElementById('bubu').classList.remove('bubu');
}, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */
})();
#bubu {
text-align: center;
width: 400px;
font-size: 20px;
}
.bubu:after {content: '|'; color: red;}
<div id="bubu" class="bubu"></div>
P.s. I've used text.split('') - to sort each character into array...
Changed → text.charAt(i); due to comment*
Just like you are inserting text from array, insert the cursor as well after the text/innerHtml. Try running the snippet, is that what you are expecting?
Only change made - _ELEMENT.appendChild(_CURSOR);
// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_ELEMENT.appendChild(_CURSOR);
_PART_INDEX++;
if (text === _CONTENT[_PART]) {
_CURSOR.style.display = "none";
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
body {
background: dodgerblue !important;
color: white !important;
}
h3 {
border-left: 6px solid whitesmoke;
background-color: lightslategray;
}
p5 {
text-align: justify;
}
p4 {
text-align: justify;
}
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: white;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: white;
animation: blink .75x step-end infinite;
}
#keyframes blink {
from,
to {
background-color: transparent;
}
50% {
background-color: black;
}
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: whitesmoke;
}
::-webkit-scrollbar-thumb {
background: grey;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row align-items-start">
<div class="col">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</nav>
<header>
<title>
Robert Smith
</title>
</header>
<body>
<p class="bg-primary text-white">
</div>
<div class="col ml-auto"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col">
<h1>
<b>
<div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
</b>
</h1>
<h2 class="display-4 ml-3"> I want to make a difference.
</h2>
<h3>
<div class="ml-3">
My Story
</div>
</h3>
<divT>
<p1>
<div id="container">
<div id="text"> </div>
<div id="cursor"></div>
</div>
<span class="border border-dark">
<div class = "ml-3" >
<br>
</div>
</span>
</p1>
<p6>
<div class="ml-3">
I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
</div>
</p6>
</divT>
<h4>
Contact me
</h4>
<p6>
<ul3>
<li>Email: robertethansmith#yahoo.com</li>
<li>GitHub: roberto257</li>
</ul3>
</p6>
</div>
<div class="col">
<script language="javascript">
//Changes images when clicked
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
} else {
document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
}
}
function changeImage2() {
if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
} else {
document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
}
}
</script>
<p2>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
</p2>
</div>
<div class="col mt-5">
<p5>
<br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
<br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I
truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
</p5>
<img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
<p4>
<br> My current skills include but are not limited to:
<ul2>
<li>Python</li>
<li>Web Development</li>
<li>JavaScript</li>
<li>Java</li>
</ul2>
I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
</p4>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Unless I'm misunderstanding what you are asking for, it looks like you are just missing a Delete function to get triggered, once the typing is done. Something like this should do the trick:
function Delete() {
_CURSOR.style.display = "none";
}
I like OPTIMUS PRIME idea(+1), but it also should better works with setInterval
I have some remarks:
1 - using textContent is more apopriate (if you don't use html tags)
2 - using arrow function to impact local vars
3 - you don't need CSS to set a Blinking Cursor
So I made this (It use html tags)
It works also if JS is disabled (no animation, but the text is shown)
Text_Typed('bubu');
function Text_Typed( eID, delay = 100)
{
let
element = document.getElementById(eID),
txt = element.innerHTML,
Text_Sz = txt.length,
sItv_id = null,
Text_html = '',
loop_i = -1,
Cursor_i = 1;
element.textContent = '▮'; // or '|';
sItv_id = setInterval(_=>{
loop_i++;
if (loop_i < Text_Sz)
{
let n, inC = txt.charAt(loop_i);
switch (inC) {
case '<':
n = txt.indexOf('>',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
case '&':
n = txt.indexOf(';',loop_i);
if (n>0)
{
inC = txt.substring(loop_i,++n);
loop_i = --n;
}
break;
}
Cursor_i = (Cursor_i+1) % 2;
Text_html += inC;
element.innerHTML = Text_html + ((Cursor_i)?'▮':'▯'); // or '|' ▉
}
else {
element.innerHTML = Text_html;
clearInterval(sItv_id);
}
}, delay);
}
#bubu {
text-align : center;
width : 400px;
font-size : 20px;
}
<div id="bubu" >
<p>When I was 15, I took a Robotics Honors course at my high school.</p>
<p>We designed and built robots using <span style="color:crimson">VEX robotics kits</span>.</p>
<p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p>
<p>This is what inspired me to code.</p>
<p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p>
<p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer
<b>capabilities</b> from this point on.</p>
</div>