Purpose for JS

Summary

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);
                                }
                            
                        

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.