While working on creating events, on EventCombo, and customizing each webpage, I saw a need to elevate the look and feel. I found a way to use my own style sheets and Javascript, by manipulating EventCombos DOM, overriding their default styles and adding animation to give a smooth user experience(UX) and creative and interesting user interface(UI). I used the JS script below to add functionality to the sites, along with the unique customization. See my CodePen.io to view animation
STEM softskills: creativity , critical thinking, vision
function readMore()
{ //get elements assign to variable
var dotText = document.getElementById("dot");
var readMoreText = document.getElementById("readMore");
var btnText = document.getElementById("btn");
if(readMoreText.style.display == "none")
{
dotText.style.display = "none";
readMoreText.style.display = "inline";
btnText.innerHTML = "read less";
}
else
{
dotText.style.display = "inline";
readMoreText.style.display = "none";
btnText.innerHTML = "read more";
}
}
document.body.onload = addElement;
function addElement () {
// CREATE A NEW DIV ELEMENT
const newDiv = document.createElement("div");
newDiv.setAttribute("id", "myID");
newDiv.setAttribute("class", "bg-info mx-auto text-center");
//CREATE NEW IMG ELEMENT TO APPEND TO NEW DIV
newContent = document.createElement("img");
newContent.src = "https://www.eventcombo.com/Images/ECImages/46a7b124-87a6-4aaf-ae36-95572a94bbf7.jpg";
//CREATE NEW DIV2 ELEMENT
const newDiv2 = document.createElement("div");
newDiv2.setAttribute("id", "myID2");
newDiv2.setAttribute("class", "bg-success text-black text-uppercase font-weight-bold mx-auto text-center");
// CREATE NEW P ELEMENT TO APPEND TO NEW DIV2
newContent2 = document.createElement("p");
var t = document.createTextNode("Added New Dynamic 'div', 'paragraph', 'text' and 'image' created with Javascript; ");
var z = document.createTextNode("added new dynamic class attribute with the Bootstrap Framework");
newDiv2.appendChild(t);
newDiv2.appendChild(z);
//CREATE NEW DIV3 ELEMENT
const newDiv3 = document.createElement("a");
//ATTRIBUTE FOR NEW DIV3 AND APPEND TO NewDiv
newDiv3.setAttribute("href", "https://rockitwomen.com");
newDiv3.setAttribute("target", "__blank");
newDiv3.setAttribute("class", "mx-auto");
newDiv3.appendChild(newContent);
newDiv.appendChild(newDiv3);
// ADD NEW ELEMENTS AND CONTENT TO THE DOM
const currentDiv = document.getElementById("viewEvent");
document.body.insertBefore(newDiv, currentDiv);
document.body.insertBefore(newDiv2, newDiv);
}